我的初始屏幕不会移动到下一个反应本机屏幕
My splash screen won't move on to the next screen on react native
我是 React Native 的新手,我正在尝试创建一个 iOS 应用程序。我的初始屏幕工作正常,并在创建项目时加载初始 App.js 屏幕。但是,当我将 return 更改为我自己的 .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"
}
}
您正在使用 "react-navigation": "^3.3.0"
并试图导入 StackNavigator
。在 v2+
中,他们将 StackNavigator
重命名为 createStackNavigator
。看起来您使用的教程正在使用 v1
。因此,您可以将正在使用的版本更改为 "react-navigation": "^1.5.2"
或保留并使用 createStackNavigator
。如果您选择坚持使用当前版本 (v2+
),请阅读我对同一问题的另一篇回复 ;它会进一步解释。
我是 React Native 的新手,我正在尝试创建一个 iOS 应用程序。我的初始屏幕工作正常,并在创建项目时加载初始 App.js 屏幕。但是,当我将 return 更改为我自己的 .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"
}
}
您正在使用 "react-navigation": "^3.3.0"
并试图导入 StackNavigator
。在 v2+
中,他们将 StackNavigator
重命名为 createStackNavigator
。看起来您使用的教程正在使用 v1
。因此,您可以将正在使用的版本更改为 "react-navigation": "^1.5.2"
或保留并使用 createStackNavigator
。如果您选择坚持使用当前版本 (v2+
),请阅读我对同一问题的另一篇回复