React native 反应本机抽屉激活自定义页脚
我有一个抽屉导航,我试图把底部的页脚,其中将包含额外的信息(应用程序版本和注销链接) 这是我的导航容器:React native 反应本机抽屉激活自定义页脚,react-native,navigation-drawer,React Native,Navigation Drawer,我有一个抽屉导航,我试图把底部的页脚,其中将包含额外的信息(应用程序版本和注销链接) 这是我的导航容器: <NavigationContainer style={styles.drawer}> <Drawer.Navigator style={styles.drawer} drawerContent={props => <CustomDrawerContent {...props} />}> <Drawer.Scr
<NavigationContainer style={styles.drawer}>
<Drawer.Navigator style={styles.drawer} drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={Home}
options={{
drawerIcon: ({ focused, size }) => (
<Image source={require('./assets/icons/sidemenu-icon-account.png')} style={[{ height: 25, width: 25 }]} />
)
}} />
<Drawer.Screen name="LoginScreen" component={LoginScreen}
options={{
drawerIcon: ({ focused, size }) => (
<Image source={require('./assets/icons/sidemenu-icon-account.png')} style={[{ height: 25, width: 25 }]} />
)
}} />
</Drawer.Navigator>
</NavigationContainer>);
您可以对TouchableOpacity使用marginTop:“auto”样式,也可以对ScrollView使用contentContainerStyle
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView contentContainerStyle={styles.drawer} {...props}>
<View style={styles.logoContainer}>
<Image source={require("./assets/logo.png")} style={{ height: "100%", width: "100%", resizeMode: "contain" }} />
</View>
<SafeAreaView style={{flex:1}}>
<View>
<DrawerItemList {...props} />
</View>
<View style={{ marginTop: 'auto' }}>
<TouchableOpacity
style={{
backgroundColor: 'red',
flexDirection: 'row',
}}>
<Text>Log Out</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</DrawerContentScrollView>
);
}
功能自定义抽屉内容(道具){
返回(
注销
);
}
我解决了这个问题,方法是将抽屉组件的所有内容包装在视图元素中,然后在根视图元素的样式属性中添加高度:“100%”。
最后添加marginTop:'auto'将推动底部的FooterComponent(或者您可以使用{position:'absolute',bottom:0}作为FooterComponent的样式属性)
抱歉,但似乎没有任何效果!styles.drawer是否具有弹性:1?你能和我分享一下吗?我正在检查,我会尝试制作一份点心,n会回来的
const styles = StyleSheet.create({
img: {
height: 40,
width: 40,
marginTop: 6,
justifyContent: 'center',
textAlignVertical: 'center',
},
logout : {
backgroundColor: 'red' ,
bottom: 0,
position: 'absolute'
},
logoContainer: {
height: 140,
width: "80%",
marginTop: 20,
marginBottom: 20,
alignSelf: "center",
},
drawer: {
backgroundColor: 'yellow',
flex:1
},
labelBottom : {
position: 'relative',
bottom:0
},
redBottom: {
},
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.red,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView contentContainerStyle={styles.drawer} {...props}>
<View style={styles.logoContainer}>
<Image source={require("./assets/logo.png")} style={{ height: "100%", width: "100%", resizeMode: "contain" }} />
</View>
<SafeAreaView style={{flex:1}}>
<View>
<DrawerItemList {...props} />
</View>
<View style={{ marginTop: 'auto' }}>
<TouchableOpacity
style={{
backgroundColor: 'red',
flexDirection: 'row',
}}>
<Text>Log Out</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</DrawerContentScrollView>
);
}