小开

最佳答案

我第一个想到的就是你可以用 ScrollView做到这一点。您的顶级容器可以是一个弹性容器，其中顶部有一个 ScrollView，底部有一个页脚。然后在 ScrollView 中将其余的应用程序正常放置。

小开

下面是基于 Colin Ramsay 回答的实际代码:

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

小开

您首先获得维度，然后通过 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>

小开

我在我的应用程序中使用固定页脚作为按钮，我实现固定页脚的方法是这样的:

<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 }！

小开

@ 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)。这是一个反应本机组件库，包括一些漂亮的布局结构(http://nativebase.io/docs/v2.0.0/components#anatomy) ，包括页眉和页脚。

这有点像手机版的 Bootstrap。

小开

我这样做的方法是有一个带有 flex 1的视图(我们称之为 P) ，然后在这个视图内部有两个分别带有 flex 0.9和0.1的视图(C1和 C2)(您可以将 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>

小开

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

小开

我发现使用 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>

小开

这里有些简单的东西:

如果你不需要一个 ScrollView 来实现这个方法，你可以用下面的代码来实现:

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

小开

人们可以实现类似的反应与 position: absolute天然

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

不过有几件事要记住。

absolute将元素相对于其父元素定位。
您可能必须手动设置元素的宽度和高度。
当方向改变时，宽度和高度会发生变化。这必须手动管理

一个实用的样式定义应该是这样的:

import { Dimensions } from 'react-native';


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


let footerStyle = {
position: 'absolute',
bottom: 0,
width: screenWidth,
height: 60
}

小开

对于 Android 系统的问题:

在 app/src/AndroidManifest.xml 中将 windowSoftInputMode 更改为以下内容。

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

我在 ios 中使用本地反应键盘和键盘 AwareScroll 完全没有问题。我正要实现大量的代码来解决这个问题，直到有人给了我这个解决方案。效果很好。

小开

如果您只是使用本机反应，那么您可以使用以下代码

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

反应 _ 原住民

本地基地

小开

当 flex 是一个正数时，它使组件变得灵活，并且它的大小与其 flex 值成正比。因此，将 flex 设置为2的组件占用的空间是将 flex 设置为1的组件的两倍。

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

<ScrollView style=\{\{flex: 1}>
//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>

小开

在清单文件中设置 android: windowSoftInputMode = “ adjPan”，它将按照您的预期工作。

小开

我认为最好和容易的一个将是如下，只是把你的观点在一个内容和页脚在一个单独的视图休息。

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

或者你可以使用本地的页脚

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

小开

下面是设置页脚和上面元素的代码。

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,
},
});

小开

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,

非常有效

小开

建议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} from 'react-native'

好处

我们可以使用这个简单的页脚没有反应底部导航

小开

我做了一个包裹，可以满足你的需要。

Https://github.com/caoyongfeng0214/rn-overlaye

<View style=\{\{paddingBottom:100}}>
<View> ...... </View>
<Overlay style=\{\{left:0, right:0, bottom:0}}>
<View><Text>Footer</Text></View>
</Overlay>
</View>

小开

我使用了 height: 100%和 flex: 1的组合。

<View style=\{\{ height: "100%" }}>
<View
style=\{\{
display: "flex",
flexDirection: "row",
alignItems: "center",
height: 50,
}}
>
{R.map(
tab => (
<TouchableOpacity
key={tab.id}
onPress={() => setCurrentTab(tab)}
>
<Text>{tab.name}</Text>
</TouchableOpacity>
),
tabs
)}
</View>
<View style=\{\{ flex: 1 }}>
<View style=\{\{ height: "100%" }}>
<View style=\{\{ flex: 1 }}>
<ScrollView
style=\{\{
width: "100%",
}}
>
... ScrollView content
</ScrollView>
</View>
<View
style=\{\{
borderTopColor: "#dadada",
borderTopWidth: 1,
width: "100%",
alignItems: "center",
justifyContent: "center",
height: 60,
paddingBottom: 10,
}}
>
<TouchableOpacity
style=\{\{
padding: 8,
borderRadius: 3,
}}
>
<Text>
Show Results
</Text>
</TouchableOpacity>
</View>
</View>
</View>

小开

创建一个这样的样式:

const styles = StyleSheet.create({
header:{ backgroundColor: "#00BFFF", height: "20%" },
footer:{ backgroundColor: "royalblue", height: "10%", flexDirection: "row", alignItems: "center" }
});

然后在标签中使用样式:

            <View style={styles.footer}>
<View style=\{\{ flex: 1, alignItems: "center" }}>
<Pressable onPress={() => openCamera(true)}>
<View style=\{\{ flexDirection: "column", alignItems: "center" }}>
<Icon name="camera" style=\{\{ fontSize: 21, color: "white" }}/>
<Text style=\{\{ color: "white" }}>Photo</Text>
</View>
</Pressable>
</View>
</View>

反应本机固定脚

反应 _ 原住民

本地基地