【问题标题】:My splash screen won't move on to the next screen on react native我的启动画面不会移动到反应原生的下一个屏幕
【发布时间】:2019-07-14 19:24:50
【问题描述】:

我是 react native 的新手,我正在尝试创建一个 iOS 应用程序。我的初始屏幕工作正常,并在创建项目时加载初始 App.js 屏幕。但是,当我将返回更改为我自己的 .js 文件时,它无法构建并卡在初始屏幕上。请给我一些提示,我学习了很多教程。

App.js

// App.js

import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';

import GetStarted from './authentication/GetStarted'
import { createStackNavigator, createAppContainer } from 'react-navigation'

const AuthNav = createAppContainer(
  createStackNavigator({
    GetStarted: { screen: GetStarted },
  })
);

type Props = {};
export default class App extends Component<Props> {

  componentDidMount() {
    SplashScreen.hide()
  }

  render() {
    return (
      <AuthNav />
    );
  }
}

GetStarted.js

//GetStarted.js
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';

export default class GetStarted extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Lets get started</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItem: 'center',
    justifyContent: 'center',
    backgroundColor: 'blue'
  }
});

package.json

{
"name": "TestApp",
"version": "0.0.1",
"private": true,
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
},
"dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.3",
    "react-native-firebase": "^5.2.2",
    "react-native-navigation": "^2.12.0",
    "react-native-splash-screen": "3.0.6",
    "react-navigation": "^3.3.0"
},
"devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.0.0",
    "jest": "24.0.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
},
"jest": {
    "preset": "react-native"
}
}

【问题讨论】:

  • change the return to my own .js 是什么意思?请详细说明。
  • 请上传您的package.json 和/或您在控制台中收到的任何错误。
  • @10101010 就像在 App.js 中一样,在返回块中,我用 替换了原始的 View 和 Text 标签,并尝试在启动屏幕之后使屏幕成为我的 GetStarted.js跨度>
  • @ChrisPoe 我添加了我的 package.json
  • 闪屏覆盖了错误。禁止在本机代码中显示启动画面。重建应用程序,您应该会看到错误

标签: react-native react-navigation splash-screen react-native-ios stack-navigator


【解决方案1】:

您正在使用"react-navigation": "^3.3.0" 并尝试导入StackNavigator。在v2+ 中,他们将StackNavigator 重命名为createStackNavigator。看起来您使用的教程使用的是v1。因此,您可以将正在使用的版本更改为 "react-navigation": "^1.5.2" 或保留并使用 createStackNavigator。如果您选择坚持使用您使用的版本 (v2+),请阅读我对同一问题的另一篇回复 here;它会进一步解释。

【讨论】:

  • 感谢您的回复;我查看了您其他帖子的答案,并遵循了它,但它仍然无法正常工作。我更新了上面的代码。
  • 这是一个 Expo 项目还是普通的 React Native? @squirreldev
  • 这是一个普通的 React Native @ChrisPoe
  • 我看到的唯一可能是react-native-splash-screen。安装后是否使用react-native link react-native-splash-screen 链接它?在我不知道错误是什么的情况下,很难调试@squirreldev
  • 是的;我按照medium.com/handlebar-labs/…@ChrisPoe 的步骤进行
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-02-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多