代码之家 › 专栏 › 技术社区 › Hirurg103 Tilendor

如何在抽屉导航底部手动添加额外项目(如注销按钮)?

react-navigation navigation-drawer react-native

Hirurg103 Tilendor · 技术社区 · 7 年前

我想在我的RN应用程序的抽屉导航底部添加注销按钮。

我正在尝试使用 contentcomponent


   
    const drawerwithlogoutbutton=(props)=>。(
<滚动视图>
<safeareaview style=styles.container forceinset=top:'always',horizontal:'never'>
<draweritems…道具/>
</safeareaview>
<按钮
style=styles.logoutbutton_
title=“注销”
onPress=()=>props.navigation.navigate('login')/>
</scrollview>
)(二)

导出默认主页=CreateDrawerNavigator({
//屏幕
},。{
//其他设置
内容组件:带logoutbutton的抽屉,
})(二)

const styles=样式表。创建({
容器:{
弹性:1,
flexdirection:'列',
},请
注销按钮:{
背景色:“红色”,
position:'绝对',
底部:0
}
})(二)
结果我在菜单的底部有一个注销按钮。但我想把它放在抽屉面板的底部

另外,我希望“注销”按钮看起来像其他菜单项,并且有一个图标

有没有一种方法可以创建一个菜单项的抽屉导航器,该菜单项没有屏幕,但只是一个像在我的例子中一样注销的操作?

我想用contentComponent方法如下:

const DrawerWithLogoutButton = (props) => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
    <Button
      style={styles.logoutButton}
      title="Logout"
      onPress={() => props.navigation.navigate('Login') }/>
  </ScrollView>
);

export default Home = createDrawerNavigator({
  // screens
}, {
  // other settings
  contentComponent: DrawerWithLogoutButton,
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  logoutButton: {
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 0
  }
});


结果我在菜单的底部有一个注销按钮。但我想把它放在抽屉面板的底部

另外,我希望“注销”按钮看起来像其他菜单项,并且有一个图标

有没有一种方法可以创建一个菜单项的抽屉导航器,该菜单项没有屏幕,但只是一个像在我的例子中一样注销的操作?

2 回复 | 直到 7 年前

Hirurg103 Tilendor 7 年前

const DrawerWithLogoutButton = (props) => (
  <ScrollView contentContainerStyle={{flex: 1,  flexDirection: 'column', justifyContent: 'space-between' }}>
    <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
    <TouchableOpacity>
      <View style={styles.item}>
        <View style={styles.iconContainer}>
          <Image source={require('./img/logout.png')} style={styles.icon}></Image>
        </View>
        <Text style={styles.label}>Logout</Text>
      </View>
    </TouchableOpacity>
  </ScrollView>
);

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  label: {
    margin: 16,
    fontWeight: 'bold',
    color: 'rgba(0, 0, 0, .87)',
  },
  iconContainer: {
    marginHorizontal: 16,
    width: 24,
    alignItems: 'center',
  },
  icon: {
    width: 24,
    height: 24,
  }
});

Ali SabziNezhad 7 年前

position:'absolute' buttom:0

<TouchableOpacity 
    onPress={() => { this.logout() }}
    style={{ bottom: 0, position: 'absolute', width: '100%' }}
>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection:'row', alignItems: 'center' }]}>
        <Icon name="md-log-out" style={{ marginRight: 10, color: '#444'}} size={20} />
        <Text style={{color: '#444'}}>Logout</Text>
      </View>
</TouchableOpacity>