切换导航器在 React Native 中不起作用

Question

I've asked a question already, and modified as much as I can, but still in trouble. Combined all children Screen js files into App.js

When I compile and run, App shows LoginScreen.js, not LoadingScreen.js.

Also, onPress={this.props.navigation.navigate('Loading')} does not works. If I press the button, it shows nothing.

What am I still missing?

import React from 'react'
import { StyleSheet, Platform, Image, Text, View, TextInput, Button, ActivityIndicator } from 'react-native'
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

class LoadingScreen extends React.Component {

  render() {
    return (
      <View style={styles.loadingcontainer}>
        <Text>Loading</Text>
        <ActivityIndicator size="large" />
        <Button title="Move to LoginScreen" onPress={this.props.navigation.navigate('Login')} />
      </View>
    )
  }
}

class LoginScreen extends React.Component {
  state = { email: '', password: '' }

  render() {
    return (
      <View style={styles.logincontainer}>
        <Button
          title='Sign in' onPress={this.props.navigation.navigate('Loading')}
        />
        <Button
          title='Sign Up'
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  loadingcontainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logincontainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logintextInput: {
    height: 40,
    width: '90%',
    borderColor: 'gray',
    borderWidth: 1,
    marginTop: 8
  },
})

const App = createSwitchNavigator(
  {
    Loading: {
      screen: LoadingScreen,
    },
    Login: {
      screen: LoginScreen,
    },
  }
);

export default createAppContainer(App);

Thank you for your help.

Answer 1

For just navigation, you can use a stack navigator. The switch navigator used for conditional rendering of two different stacks. Anyways you can set loading as the first screen buy setting initialRouteName to loading. Here is an example

 createSwitchNavigator(
  {
    LimitedAccess: {
     screen: Trial,
    },
    AppScreens: {
      screen: AppScreens,
    },

    AuthScreens: {
      screen: AuthScreens,
    },
  },
  {
    initialRouteName: signedIn ? 'AppScreens' : 'AuthScreens',
  },
),

);

Note: Here signedIn is a conditional operator which decides the rendering of stacks.

Answer 2

The way your props are currently defined causes them to be instantly executed.

The onPress prop is instantly executed.

return (
  <View style={styles.loadingcontainer}>
    <Text>Loading</Text>
    <ActivityIndicator size="large" />
    <Button title="Move to LoginScreen" onPress={this.props.navigation.navigate('Login')} />
  </View>
)

You should instead attach a function to onPress that can be executed when the button is pressed.

return (
  <View style={styles.loadingcontainer}>
    <Text>Loading</Text>
    <ActivityIndicator size="large" />
    <Button title="Move to LoginScreen" onPress={() =>  this.props.navigation.navigate('Login')} />
  </View>
)

Answer 3

Your onPress-calls are running instantly, which causes your problems. Change to:

import React from 'react'
import { StyleSheet, Platform, Image, Text, View, TextInput, Button, ActivityIndicator } from 'react-native'
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

class LoadingScreen extends React.Component {

  render() {
    return (
      <View style={styles.loadingcontainer}>
        <Text>Loading</Text>
        <ActivityIndicator size="large" />
        <Button title="Move to LoginScreen" onPress={() => this.props.navigation.navigate('Login')} />
      </View>
    )
  }
}

class LoginScreen extends React.Component {
  state = { email: '', password: '' }

  render() {
    return (
      <View style={styles.logincontainer}>
        <Button
          title='Sign in' onPress={() => this.props.navigation.navigate('Loading')}
        />
        <Button
          title='Sign Up'
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  loadingcontainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logincontainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logintextInput: {
    height: 40,
    width: '90%',
    borderColor: 'gray',
    borderWidth: 1,
    marginTop: 8
  },
})

const App = createSwitchNavigator(
  {
    Loading: {
      screen: LoadingScreen,
    },
    Login: {
      screen: LoginScreen,
    },
  }
);

export default createAppContainer(App);