反应原生固定页脚

我尝试创build反应原生的应用程序，看起来像现有的Web应用程序。 我在窗口底部有一个固定的页脚。 有没有人有想法如何实现与原生反应？

在现有的应用程序很简单：

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

Answer 1

closures我的头顶，你可以用ScrollView来做到这一点。 您的顶级容器可以是一个弹性容器，里面有一个顶部的ScrollView和底部的页脚。 然后在ScrollView里，把正常的应用程序的其余部分。

Answer 2

这是基于科林Ramsay答案的实际代码：

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

Answer 3

我在我的应用程序中使用固定页脚作为button。 我实现一个固定页脚的方式是这样的：

 <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}。 我希望这有帮助！

Answer 4

您首先获得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> 

Answer 5

@亚历山大感谢您的解决scheme

下面是你正在寻找的代码

 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 

以下是截图

Answer 6

你也可能想看看NativeBase（ http://nativebase.io ）。 这是一个React Native组件库，包含一些漂亮的布局结构（ http://nativebase.io/docs/v2.0.0/components#anatomy ），包括页眉和页脚。

这有点像Bootstrap for Mobile。

Answer 7

我这样做的方式是用flex 1来获得一个视图（让我们称之为P），然后在该视图内部有两个视图（C1和C2），分别为flex 0.9和0.1（可以将flex高度更改为所需的值） 。 然后，在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> 

Answer 8

最好的方法是使用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>