react底部的原生位置元素

Question

我正在尝试移动一个名为"论坛"；在屏幕底部，我尝试了位置：固定，底部：0，但没有成功我也试过"弹性端"，但还是没用知道怎么了吗？

这是世博会代码：

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { DrawerNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold', marginTop: 20 }}>Home</Text>
</View>
);
}
}
class Enquiry extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold', marginTop: 20 }}>Enquiry</Text>
</View>
);
}
}
class Batches extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold', marginTop: 20 }}>Batches</Text>
</View>
);
}
}
class Forum extends React.Component {
render() {
return (
<View style={{ flex:1,justifyContent:'center',alignItems: 'center',position:'absolute',bottom:0}}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold',marginBottom:36}}>Forum</Text>
</View>
);
}
}
const MyDrawerNavigator = new DrawerNavigator(
{
Home: HomeScreen,

Batches:Batches,
Enquiry:Enquiry,
Forum:Forum,
},
{
drawerBackgroundColor: 'rgba(255,255,255,.9)',
contentOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#6b52ae',
},
}
);
export default MyDrawerNavigator;

我不允许分享图片，但请单击链接查看在此处输入图像描述

Answer 1

react native中的有效position选项是relative或absolute。默认值为relative。

如果你想滚动内容并固定屏幕中Forum的位置，你必须像下面这样分离你的视图层次结构，并使用absolute的位置。

<View>
<ScrollView>
...anything content
</ScrollView>

<Forum style={{position:'absolute', bottom: 0}}/>
</View>

<...>
<MyDrawerNavigator .../>
<Forum style={{position:'absolute', bottom: 0}} .../>
<.../>