[react-native] 네이티브 고정 바닥 글 반응

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

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

.footer {
  position: fixed;
  bottom: 0;
}

답변

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

답변

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

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>

답변

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

<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}을 사용하십시오. 이게 도움이 되길 바란다!

답변

먼저 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>

답변

@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

아래는 스크린 샷입니다

답변

NativeBase ( http://nativebase.io )를 살펴볼 수도 있습니다 . 이것은 React Native의 컴포넌트 라이브러리로 머리글과 바닥 글을 포함하여 멋진 레이아웃 구조 ( http://nativebase.io/docs/v2.0.0/components#anatomy )를 포함합니다.

모바일 용 부트 스트랩과 약간 비슷합니다.

답변

여기 간단한 것들 :

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

<View style={{flex: 1, backgroundColor:'grey'}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>