web-dev-qa-db-ja.com

ドロワーナビゲーションの下部に手動で（ログアウトボタンのように）アイテムを追加する方法は？

RNアプリのドロワーナビゲーションの下部にログアウトボタンを追加したいのですが。

As you can see the Logout button is located at the bottom of the drawer menu. How can I move it to the bottom of the drawer panel?

私は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
  }
});

結果として、メニューの下部に[ログアウト]ボタンがあります。代わりにドロワーパネルの下部に配置したい

また、[ログアウト]ボタンを他のメニュー項目のように見せて、アイコンを付けたいです。

画面のないメニュー項目でドロワーナビゲーターを作成する方法はありますが、私の場合のようにログアウトのようなアクションにすぎませんか？

react-nativenavigation-drawerreact-navigation
7
Hirurg103

引き出しメニューの下部にある[ScrollView]コンテナにjustifyContent: 'space-between'を追加することで、ログアウトを調整できました。写真で結果を見ることができます

the Logout button is located at the bottom of the drawer menu

結果のソースコードは次のようになります。

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

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>

スタイルを変更して、他のボタンのようにすることができます。これがあなたに役立つことを願っています...

2
Ali Sn