Блог

В моем проекте 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 класс.

Итак, я понятия не имею, как я могу это сделать. Было бы очень приятно, если бы кто-нибудь предложил мне это сделать.

Для этого вам нужно создать пользовательский ящик вместо стандартного,

contentComponent это параметр конфигурации, в котором вы можете передать свой ящик.

смотрите подробности здесь

теперь после этого вам нужно будет добавить текст выхода из системы вручную ниже DrawerItems . и при нажатии этого текста выполните сброс стека или перейдите куда-нибудь