Блог

Главная - Вопросы по программированию - Как переключиться с одного экрана ящика на экран без ящика в React-native?

Как переключиться с одного экрана ящика на экран без ящика в React-native?

#javascript #react-native

#javascript #react-native

Вопрос:

Я хочу знать один простой способ переключения с одного экрана на другой. Потому что я действительно расстраиваюсь из-за этой проблемы. Я объявил один навигатор стека на своем рабочем столе, чтобы инициализировать запуск экрана. Вот код для этого-

HomeScreen.js

 import React from 'react';
import { StyleSheet, Text, View, AsyncStorage } from 'react-native';
import {StackNavigator} from 'react-navigation';
import WelcomeScreen from './WelcomeScreen';
import LoginScreen from './components/LoginScreen';
import NoteMeHome from './components/NoteMeHome';
import HomeDrawer from './HomeDrawer/HomeDrawer';
import SettingsScreen from './components/SettingsScreen';
import TestScreen from './components/TestScreen';

class HomeScreen extends React.Component {

  state = {
    getValue: null,

  }

  async componentDidMount() {

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

  }

  render() {
    console.log('#ZZZ:', this.state.getValue);

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

  }
}

const AppStackNavigator = new StackNavigator({
  HomeDrawer: {screen:HomeDrawer},
  WelcomeScreen: {screen:WelcomeScreen},

  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},

  SettingsScreen: {screen:SettingsScreen},
  TestScreen: {screen:TestScreen}

})

const AppStackNavigator2 = new StackNavigator({
    LoginScreen: {screen:LoginScreen},
  WelcomeScreen: {screen:WelcomeScreen},
  HomeDrawer: {screen:HomeDrawer
  },

  NoteMeHome: {screen:NoteMeHome},

  SettingsScreen: {screen:SettingsScreen},
  TestScreen: {screen:TestScreen}

})

export default HomeScreen;

После входа в систему для следующего экрана я создал один класс с навигацией по ящику с именем HomeDrawer. Вот код для этого-

HomeDrawer.js

 import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView} from 'react-navigation';

import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';

import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
import WelcomeScreen from "../WelcomeScreen";

let user_email ='', user_first_name='';

class HomeDrawer extends Component {

  state = {

    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  componentDidMount() {
    AsyncStorage.getItem("user_email").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_email = value;
    });

    AsyncStorage.getItem("user_first_name").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_first_name = value;
    });

  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )

  }
}

const CustomDrawerContentComponent = (props) => (

 <View style={{backgroundColor:"#ffff", height:'100%'}}>

      <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150,  resizeMode:'cover', backgroundColor:"@aaaa"}}>  
      <Body style={styles.drawerBody}>
        <Image
          style={styles.drawerImage}
          source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
        />
        <View style={styles.drawerHeaderText}>
          <Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
          <Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
        </View>

      </Body>


      </ImageBackground>


    <Content style={{marginTop:30 }}>
      <DrawerItems {...props}/>
    </Content>

  </View>



);

const MyApp = DrawerNavigator({
  NoteMeHome:{
    screen: NoteMeHome
  },
  Settings:{
    screen: SettingsScreen
  },
  WelcomeScreen : {
    screen: WelcomeScreen
  }


},

{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}


);

export default HomeDrawer;

Я создал SettingsScreen.js для навигатора ящика. Вот код для этого-

SettingsScreen.js

 import React,{Component} from 'react';
import {View, Text, StyleSheet, Image, TouchableHighlight} from 'react-native';
import {Container, Content, Icon, Button} from 'native-base';
import CustomHeader from './CustomHeader';

class SettingsScreen extends Component {
  static navigationOptions = ({navigation}) => ({
    title: "Settings",
    headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
    onPress={()=>navigation.navigate('DrawerOpen')}/>,

    drawerIcon: 

    <Image source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/automatic.png'}}
            style={styles.icon}
    />
  })

  render() {


    return(


      <Container>
        <CustomHeader
          title="Settings"
          drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
        />
        <Content contentContainerStyle={{flex:1, alignItems:'center', 
        justifyContent:'center', padding:10}}>
        <Button full onPress={() => this.props.navigation.navigate('TestScreen')}>
          <Text style={{color:'white'}}>Go To Test Screen</Text>
        </Button>
        </Content>
      </Container>
    )
  }

}

export default SettingsScreen;

Теперь проблема в том, что-
Вы можете увидеть в моем SettingsScreen.js файл, я добавил эту строку при нажатии кнопки-

 this.props.navigation.navigate('TestScreen')

Который должен запускать класс TestScreen, который находится за пределами навигации ящика. Вот код для этого-

TestScreen.js

 import React,{Component} from 'react';
import {View, Text, StyleSheet, Image, TouchableHighlight} from 'react-native';

class TestScreen extends Component {
render() {

    return(
        <View>
            <Text>Hello from Test Screen</Text>
        </View>
    )
  }

}

export default TestScreen;

Но после нажатия кнопки в SettingsScreen.js класс ничего не работает. Я могу перейти к другому классу внутри HomeDrawer, изменив код при нажатии. Но в случае любого другого класса, который находится за пределами навигации по ящику, он не работает.

Версия, которую я использовал для react-navigation, является-

react-navigation@1.0.0-beta.23

Я не хочу обновлять эту версию, потому что в последней версии мой код показывал некоторые другие ошибки. Итак, пожалуйста, ответьте на вопрос, может ли кто-нибудь помочь мне с текущей конфигурацией кода.

Ответ №1:

Обновление пожалуйста, обновите react-navigation, используя npm -i react-navigation@latest

а также вам необходимо перейти по ссылке ниже, прежде чем использовать код. после обновления нам нужно позаботиться о стольких вещах.

ссылка:https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0.html

Оригинальный ответ

Вы можете использовать switch navigator для своих целей.

сначала вы должны создать класс навигации,

например:

 import {
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
  createSwitchNavigator
} from "react-navigation";

...
...
...

const AppStackNavigator = createStackNavigator({
  HomeDrawer: {screen:HomeDrawer},
  WelcomeScreen: {screen:WelcomeScreen},
  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},
  SettingsScreen: {screen:SettingsScreen},
  TestScreen: {screen:TestScreen}
})

const AppStackNavigator2 = createStackNavigator({
  LoginScreen: {screen:LoginScreen},
  WelcomeScreen: {screen:WelcomeScreen},
  HomeDrawer: {screen:HomeDrawer},
  NoteMeHome: {screen:NoteMeHome},
  SettingsScreen: {screen:SettingsScreen},
  TestScreen: {screen:TestScreen}
})

const DrawerNavi = createDrawerNavigator({
  NoteMeHome:{ screen: NoteMeHome},
  Settings:{ screen: SettingsScreen},
  WelcomeScreen : { screen: WelcomeScreen}
},
{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}
);

const switchNavigator = createSwitchNavigator(
  {
    AppStackNavigator: AppStackNavigator,
    AppStackNavigator2: AppStackNavigator2,
    DrawerNavi: DrawerNavi
  },
  { headerMode: "none", initialRouteName: "AppStackNavigator" }
);

const App = createAppContainer(switchNavigator);

export default App;

Затем вы можете переключать эти навигации с помощью,

 this.props.navigation.navigate("AppStackNavigator2");

Комментарии:

1. Ну, я сделал то, что вы упомянули. Сначала я создал класс SwitchNavigation и вставил весь ваш код в этот класс. После этого я импортирую приложение в свой SettingsScreen.js файл. После запуска проекта отображается следующая ошибка — undefined не является функцией (рядом с ‘… (0, _reactNavigation.createStackNavigator)…’)

2. Вы импортировали все файлы из «react-navigation» вверху?

3. Вы импортировали свои классы в файл, т.Е.. ‘LoginScreen’, ‘WelcomeScreen’, .. etc?

4. Да, я сделал. Здесь вы можете это проверить — [ссылка] codeshare.io/5ogMgg

5. Сначала вы должны обновить свою react-navigation до версии 3.6.1. Функции, которые я использовал для реализации необходимой логики, в последней версии. Пожалуйста, попробуйте и дайте мне знать.