네이티브 고정 바닥 글 반응

128

기존 웹앱처럼 보이는 반응 네이티브 앱을 만들려고합니다. 창 하단에 바닥 글이 고정되어 있습니다. 누구나 네이티브 반응을 통해 이것이 어떻게 달성 될 수 있는지 알고 있습니까?

기존 앱에서는 간단합니다.

.footer {
  position: fixed;
  bottom: 0;
}
react-native 
— 4가
소스

답변:

167

내 머리 꼭대기에서 ScrollView 로이 작업을 수행 할 수 있습니다. 최상위 컨테이너는 내부에 FlexView가 있고 맨 아래에 바닥 글이있는 플렉스 컨테이너 일 수 있습니다. 그런 다음 ScrollView 내부에 나머지 앱을 정상적으로 넣습니다.

— 콜린 램지
소스
큰 =) 방금 추가 들으 작품, height바닥 글보기로하고 그것의 모양 4S에 좋은 6
— 4ega
1
작동합니다. 그러나 나는 왜 그런지 이해할 수 없었다. 왜 이것이 작동합니까?
— Aditi
171

Colin의 Ramsay 답변을 기반으로 한 실제 코드는 다음과 같습니다.

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
— 알렉산더 자이체프
소스
1
네, 시도했지만 플렉스가 작동하지 않았습니다 : D 다시 시도해 주셔서 감사합니다 :) 입력을 클릭하면 onContentSizeChange를 사용하고 싶습니다. 그래서 내가 한 것은 스크롤 뷰 상단을 다음과 같이 스크롤했습니다 : onContentSizeChange = {(너비, 높이) => this.refs.scrollView.scrollTo ({y : this.state.onInputSelectScrollViewPaddingSize})}
— Ernestyno
1
작동하지 않습니다. 나는 그것이 어떤 경우에도 작동하는지 알 수 없다
— Paulo Roberto Rosa
63

내 앱의 버튼에 고정 바닥 글을 사용하고 있습니다. 고정 바닥 글을 구현하는 방법은 다음과 같습니다.

<View style={{flex: 1}}>
<View><Text>my text</Text></View>
<View style={{position: 'absolute', left: 0, right: 0, bottom: 0}}><Text>My fixed footer</Text></View>
</View>

예를 들어 키보드가 나타날 때 바닥 글을 위로 움직이려면 다음을 사용할 수 있습니다.

const {  DeviceEventEmitter } = React

class MyClass {
  constructor() {
     this.state = {
       btnLocation: 0
     }
  }

  componentWillMount() {
     DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this))
     DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this))
  }

  keyboardWillShow(e) {
    this.setState({btnLocation: e.endCoordinates.height})
  }

  keyboardWillHide(e) {
    this.setState({btnLocation: 0})
  }
}

그런 다음 고정 바닥 글 클래스에서 {bottom : this.state.btnLocation}을 사용하십시오. 이게 도움이 되길 바란다!

— dahveed707
소스
2
키보드 리스너에서 'this.setState (...)'를 수행하려고 할 때 '정의되지 않은 사람은 객체가 아닙니다 ( "DeviceEventEmitter.addListener"평가)?
— John Sardinha
@JohnSardinha import { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)대신 시도하십시오 .
— maxhungry
23

먼저 Dimension을 얻은 다음 flex 스타일을 통해 조작하십시오.

var Dimensions = require('Dimensions')
var {width, height} = Dimensions.get('window')

렌더링

<View style={{flex: 1}}>
    <View style={{width: width, height: height - 200}}>main</View>
    <View style={{width: width, height: 200}}>footer</View>
</View>

다른 방법은 flex를 사용하는 것입니다

<View style={{flex: 1}}>
    <View style={{flex: .8}}>main</View>
    <View style={{flex: .2}}>footer</View>
</View>
— syarul
소스
17

@Alexander 솔루션 주셔서 감사합니다

아래는 정확히 원하는 코드입니다.

import React, {PropTypes,} from 'react';
import {View, Text, StyleSheet,TouchableHighlight,ScrollView,Image, Component, AppRegistry} from "react-native";

class mainview extends React.Component {
 constructor(props) {
      super(props);

  }

  render() {
    return(
      <View style={styles.mainviewStyle}>
        <ContainerView/>
          <View style={styles.footer}>
          <TouchableHighlight style={styles.bottomButtons}>
              <Text style={styles.footerText}>A</Text>
          </TouchableHighlight>
          <TouchableHighlight style={styles.bottomButtons}>
              <Text style={styles.footerText}>B</Text>
          </TouchableHighlight>
          </View>
      </View>
    );
  }
}

class ContainerView extends React.Component {
constructor(props) {
      super(props);
}

render() {
    return(
      <ScrollView style = {styles.scrollViewStyle}>
          <View>
            <Text style={styles.textStyle}> Example for ScrollView and Fixed Footer</Text>
          </View>
      </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
  mainviewStyle: {
  flex: 1,
  flexDirection: 'column',
},
footer: {
  position: 'absolute',
  flex:0.1,
  left: 0,
  right: 0,
  bottom: -10,
  backgroundColor:'green',
  flexDirection:'row',
  height:80,
  alignItems:'center',
},
bottomButtons: {
  alignItems:'center',
  justifyContent: 'center',
  flex:1,
},
footerText: {
  color:'white',
  fontWeight:'bold',
  alignItems:'center',
  fontSize:18,
},
textStyle: {
  alignSelf: 'center',
  color: 'orange'
},
scrollViewStyle: {
  borderWidth: 2,
  borderColor: 'blue'
}
});

AppRegistry.registerComponent('TRYAPP', () => mainview) //Entry Point    and Root Component of The App

아래는 스크린 샷입니다

바닥 글이 고정 된 ScrollView

— 아 okR
소스
좋은 예 :)
— joey rohan
7

여기 간단한 것들 :

이 접근법에 대해 ScrollView가 필요하지 않은 경우 아래 코드를 사용하여 다음과 같은 것을 얻을 수 있습니다.

이 같은

<View style={{flex: 1, backgroundColor:'grey'}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>
— 체라 그 베르 마
소스
7

아래는 바닥 글과 요소를 설정하는 코드입니다.

import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
export default class App extends Component {
    render() {
      return (
      <View style={styles.containerMain}>
        <ScrollView>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
        </ScrollView>
        <View style={styles.bottomView}>
          <Text style={styles.textStyle}>Bottom View</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  containerMain: {
    flex: 1,
    alignItems: 'center',
  },
  bottomView: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    bottom: 0,
  },
  textStyle: {
    color: '#fff',
    fontSize: 18,
  },
});
— 슈 루티 가그
소스
6

내가 한 방법은 flex 1을 가진 뷰 (P라고 부름)를 가지고 있었고, 그 뷰 안에 각각 0.9와 0.1을 가진 2 개의 더 많은 뷰 (C1과 C2)가 있습니다 (플렉스 높이를 필요한 값으로 변경할 수 있습니다) . 그런 다음 C1 내부에 스크롤보기가 있습니다. 이것은 나를 위해 완벽하게 작동했습니다. 아래 예.

<View style={{flex: 1}}>
    <View style={{flex: 0.9}}>
        <ScrollView>
            <Text style={{marginBottom: 500}}>scrollable section</Text>
        </ScrollView>
    </View>
    <View style={{flex: 0.1}}>
        <Text>fixed footer</Text>
    </View>
</View>
— 라지 쉬
소스
이 외에도 값 0의 왼쪽, 오른쪽 및 아래쪽 스타일을 제공해야 작동 할 수 있습니다.
— IVI
5

하나의 반응으로 비슷한 것을 얻을 수 있습니다. position: absolute

let footerStyle = {
  position: 'absolute',
  bottom: 0,
}

명심해야 할 것이 몇 가지 있습니다.

  1. absolute 부모를 기준으로 요소를 배치합니다.
  2. 요소의 너비와 높이를 수동으로 설정해야 할 수도 있습니다.
  3. 방향이 변경되면 너비와 높이가 변경됩니다. 수동으로 관리해야합니다

실용적인 스타일 정의는 다음과 같습니다.

import { Dimensions } from 'react-native';

var screenWidth = Dimensions.get('window').width; //full screen width

let footerStyle = {
  position: 'absolute',
  bottom: 0,
  width: screenWidth,
  height: 60
}
— 아카 쉬 쿠 리안 호세
소스
5

flex를 사용하는 것이 가장 간단한 해결책이라는 것을 알았습니다.

<View style={{flex:1, 
    justifyContent: 'space-around', 
    alignItems: 'center',
    flexDirection: 'row',}}>

  <View style={{flex:8}}>
    //Main Activity
  </View>
  <View style={{flex:1}}>
    //Footer
  </View>

 </View>
— saiftyfirst
소스
4

flex가 양수인 경우 구성 요소를 유연하게 만들고 flex 값에 비례하여 크기가 조정됩니다. 따라서 flex가 2로 설정된 구성 요소는 flex가 1로 설정된 구성 요소보다 두 배의 공간을 차지합니다.

   <View style={{flex: 1}>
            
     <ScrollView>
        //your scroll able content will be placed above your fixed footer content. 
        //when your content will grow bigger and bigger it will hide behind 
        //footer content. 
     </ScrollView>

     <View style={styles.footerContainer}>
        //your fixed footer content will sit fixed below your screen 
     </View>

</View>
스 니펫 확장

— iambinodstha
소스
1
답변에 설명을 추가해보십시오.
— HMD
3

가장 좋은 방법은 justifyContent 속성을 사용하는 것입니다

<View style={{flexDirection:'column',justifyContent:'flex-end'}}>
     <View>
        <Text>fixed footer</Text>
    </View>
</View>

화면에 여러보기 요소가있는 경우 사용할 수 있습니다 

<View style={{flexDirection:'column',justifyContent:'space-between'}}>
     <View>
        <Text>view 1</Text>
    </View>
    <View>
        <Text>view 2</Text>
    </View>
    <View>
        <Text>fixed footer</Text>
    </View>
</View>
— 만조 어 사마 드
소스
3 
import {Dimensions} from 'react-native'

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

그런 다음이 스타일을 작성

 position: 'absolute',
 top: HEIGHT-80,
 left: 0,
 right: 0,

매력처럼 일했다

— 조셉 오 위고
소스
2

이것에 대한 안드로이드 문제의 경우 :

app / src / AndroidManifest.xml에서 windowSoftInputMode를 다음으로 변경하십시오. 

<activity
   android:windowSoftInputMode="stateAlwaysHidden|adjustPan">

react-native 및 keyboardAwareScroll을 사용하는 iOS에서는 전혀 문제가 없었습니다. 누군가 나 에게이 솔루션을 제공 할 때까지 이것을 파악하기 위해 많은 코드를 구현하려고했습니다. 완벽하게 작동했습니다.

— 리사 페이 쿡
소스
2

react native 만 사용하면 다음 코드를 사용할 수 있습니다

<View style={{flex:1}}>

{/* Your Main Content*/}
<View style={{flex:3}}>

<ScrollView>
   {/* Your List View ,etc */}
</ScrollView>

</View>

{/* Your Footer */}
<View style={{flex:1}}>
   {/*Elements*/}
</View>


 </View>

또한 반응 네이티브 프로젝트에서 https://docs.nativebase.io/ 를 사용 하고 다음과 같은 작업을 수행 할 수 있습니다

<Container>

{/*Your Main Content*/}
<Content>

<ScrollView>
   {/* Your List View ,etc */}
</ScrollView>

</Content>

{/*Your Footer*/}
<Footer>
   {/*Elements*/}
</Footer>

</Container>

반응 _ 네이티브

NativeBase.io

— ab_did96
소스
2

매니페스트 파일에서 android : windowSoftInputMode = "adjustPan"을 설정하면 예상대로 작동합니다.

— 안드레 쉬 싱
소스
1

나는 가장 쉽고 쉬운 방법은 다음과 같다고 생각합니다. 콘텐츠에 나머지 부분을 놓고 별도의보기로 바닥 글을 넣으십시오.

`<Container>
   <Content>
     <View>
      Ur contents
    </View>
  </Content>
  <View>
  Footer
  </View>
</Container>`

또는 기본 기반의 바닥 글을 사용할 수 있습니다.

`<Container>
  <Content>
    <View>
Ur contents
    </View>
  </Content>
<Footer>
Footer
</Footer>
</Container>`
— 아이 쉬 와라 쉐티
소스
1

제안 1

=> 바닥 글이 고정 된 본문

<View style={{ flex: 1, backgroundColor: 'gray' }}>

        <View style={{ flex: 9, backgroundColor: 'gray',alignItems: 'center', justifyContent: 'center',  }}>
          <Text style={{color:'white'}}>...Header or Body</Text>
        </View>


        <View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center', }}>
          <Text>...Footer</Text>
        </View>

</View>

데모 이미지

편집 2

=> 탭이있는 본문 및 고정 바닥 글

<View style={{ flex: 1, backgroundColor: 'gray' }}>

        <View style={{ flex: 9, backgroundColor: 'gray', alignItems: 'center', justifyContent: 'center', }}>
          <Text style={{ color: 'white' }}>...Header or Body</Text>
        </View>


        <View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center', }}>
          <View style={{ flex: 1, flexDirection: 'row' }}>
            <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
              <View>
                <Text>
                  ...Home
              </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
              <View>
                <Text>
                  ...Settings
              </Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
</View>

여기에 이미지 설명을 입력하십시오

노트

import {TouchableOpacity} in 'react-native'

장점

하단 바닥 탐색없이이 간단한 바닥 글을 사용할 수 있습니다

— 데 벨리 우스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.