Question

在我的React-native项目中，我使用了一个堆栈导航来设置屏幕导航的流程。为此，我创建了一个 HomeScreen.js 类，这是该代码-

主屏幕

import { createAppContainer } from 'react-navigation'
    class HomeScreen extends React.Component {
      state = {
        getValue: null,
      }

      async componentDidMount() {
        const token = await AsyncStorage.getItem('token');
        this.setState({ getValue: token });
      }

      render() {
        if(this.state.getValue !== null) {
          return (
            <AppStackNavigator/>
          );
        } 

      }
    }

    const AppStackNavigator = createAppContainer(createStackNavigator({

      LoginScreen: {screen:LoginScreen},
      NoteMeDrawer: {screen:NoteMeDrawer, 
        navigationOptions: {
          header:null        // this will do your task
        }
      },
      WelcomeScreen: {screen:WelcomeScreen},
      NoteMeHome: {screen:NoteMeHome},
      SettingsScreen: {screen:SettingsScreen},
      UpdateNotes: {screen:UpdateNotes},
      AllNotes: {screen:AllNotes},
    }, 

    {
      initialRouteName: 'LoginScreen'
    }

    ))

    export default HomeScreen;

在我的“开始”屏幕（LoginScreen）中，成功响应后，我将使用以下代码启动抽屉导航屏幕NoteMeDrawer-

this.props.navigation.navigate('NoteMeDrawer');

在“抽屉”导航类中，我已经启动了所有需要作为抽屉项目的类。

这是我的NoteMeDrawer类的代码-

NoteMedrawer.js

class NavigationDrawerStructure extends React.Component {
  static navigationOptions = {
    header: null ,
  };

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
         <Icon name='menu'/>
        </TouchableOpacity>
      </View>
    );
  }
}
const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: NoteMeHome,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),


  },
  ScreenInternal: {
    screen: ScreenInternal,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen With Navigation Drawer',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: MakeNote,
    navigationOptions: ({ navigation }) => ({
      title: 'Create Note',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: AllNotes,
    navigationOptions: ({ navigation }) => ({
      title: 'All Notes',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Drawer = createDrawerNavigator({
  Screen1: {
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',

      drawerIcon: (
        <Icon name='home' size={25}                         
        />
      )

    },
  },

  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Create Note',
      drawerIcon: (
        <Image  source={require('../assets/icon_create_note.png')}  
        style={{height:25, width:25,}}                       
        />
      )
    },
  },

  Screen3: {
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'All Notes',
      drawerIcon: (
        <Image  source={require('../assets/icon_all_notes.png')}  
        style={{height:25, width:25,}}                        
        />
      )
    },
  },

});

const DrawerNavigatorExample = createStackNavigator({
  Drawer: { screen: Drawer, navigationOptions: { header: null } },
  DetailsNote: {
    screen: DetailsNote,
    navigationOptions: { title: 'Details Note' },
  },

  UpdateNotes: {
    screen: UpdateNotes,
    navigationOptions: { title: 'Update Note' },
  },

});

export default createAppContainer(DrawerNavigatorExample);

以下是我的抽屉项目的屏幕截图-

现在，我想要的是在名称“注销” 下再增加一个抽屉项目。然后按下该用户，将返回到 LoginScreen.js 类。

所以，我不知道该怎么做。如果有人建议我这样做，那将非常好。

Answer 1

为此，您必须创建一个自定义抽屉，而不是默认抽屉，

contentComponent是配置选项，您可以在其中传递抽屉。

see details here

现在，您需要在DrawerItems下手动在其中添加注销文本。并且该文本的onPress确实会重置堆栈或导航至某个地方

如何通过在React-Native中按一个Drawer Item从Drawer导航移到上一个屏幕？

1 个答案: