Reactjs 开关导航器在React Native中不工作

我已经问了一个问题，并且尽可能地修改了，但是仍然有麻烦。 将所有子屏幕js文件合并到App.js中

当我编译和运行时，应用程序显示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);

从“React”导入React
从“react native”导入{样式表、平台、图像、文本、视图、文本输入、按钮、ActivityIndicator}
从“反应导航”导入{createAppContainer，createSwitchNavigator}
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
从“反应本机向量图标/离子图标”导入离子图标；
类加载屏幕扩展React.Component{
render（）{
返回(
加载
)
}
}
类LoginScreen扩展了React.Component{
状态={电子邮件：''，密码：'}
render（）{
返回(
)
}
}
const styles=StyleSheet.create({
装货集装箱：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
登录容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
},
logintextInput：{
身高：40，
宽度：“90%”，
边框颜色：“灰色”，
边框宽度：1，
玛金托普：8
},
})
const App=createSwitchNavigator(
{
装载：{
屏幕：加载屏幕，
},
登录：{
屏幕：登录屏幕，
},
}
);
导出默认createAppContainer（应用程序）；

---

感谢您的帮助。

您当前定义道具的方式会使道具立即执行

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

返回(
加载
)

相反，您应该在onPress上附加一个功能，该功能可以在按下按钮时执行

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

返回(
加载
this.props.navigation.navigate（'Login'）}/>
)

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

从“React”导入React
从“react native”导入{样式表、平台、图像、文本、视图、文本输入、按钮、ActivityIndicator}
从“反应导航”导入{createAppContainer，createSwitchNavigator}
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
从“反应本机向量图标/离子图标”导入离子图标；
类加载屏幕扩展React.Component{
render（）{
返回(
加载
this.props.navigation.navigate（'Login'）}/>
)
}
}
类LoginScreen扩展了React.Component{
状态={电子邮件：''，密码：'}
render（）{
返回(
this.props.navigation.navigate（'Loading'）}
/>
)
}
}
const styles=StyleSheet.create({
装货集装箱：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
登录容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
},
logintextInput：{
身高：40，
宽度：“90%”，
边框颜色：“灰色”，
边框宽度：1，
玛金托普：8
},
})
const App=createSwitchNavigator(
{
装载：{
屏幕：加载屏幕，
},
登录：{
屏幕：登录屏幕，
},
}
);
导出默认createAppContainer（应用程序）；

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

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

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

))

注意：这里signedIn是一个条件运算符，它决定堆栈的呈现