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

Question

我已经提出了一个问题，并尽可能多地进行了修改，但仍然遇到了麻烦。 将所有子 Screen js 文件合并到 App.js 中

当我编译运行时，App 显示的是 LoginScreen.js，而不是 LoadingScreen.js。

此外，onPress={this.props.navigation.navigate('Loading')} 不起作用。如果我按下按钮，它不会显示任何内容。

我还缺少什么？

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);

感谢您的帮助。

Answer 1

对于导航，您可以使用堆栈导航器。用于两个不同堆栈的条件渲染的切换导航器。无论如何，您可以将加载设置为第一个屏幕购买设置 initialRouteName 加载。这是一个例子

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

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

);

注意：这里的 signedIn 是一个条件运算符，它决定了堆栈的渲染。

Answer 2

你的 props 当前定义的方式会导致它们被立即执行。

onPress 属性会立即执行。

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

您应该在 onPress 上附加一个可以在按下按钮时执行的函数。

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

您的 onPress 呼叫会立即运行，这会导致您出现问题。 改为：

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);