react-native - 在不使用第3方库的情况下，在 native react 中显示主屏幕之前显示启动屏幕

Question

我是本机反应的初学者，所以对所有专家来说我的问题似乎很愚蠢。

但是我正在努力实现一个基本功能，我想要实现一个我要使用启动屏幕启动我的应用程序，几秒钟后，我想要显示登录屏幕或主屏幕。

我检查了一些示例，但未找到任何包含完整代码的示例，因此不知道如何在我的应用程序中使用这些代码段。

我尝试按照文档应用一些代码，但是我的代码给出了错误，请查看一下并为我提供帮助。

下面是我的代码：

Index.android.js


/ **
*示例React Native应用
* https://github.com/facebook/react-native
* @流
* /

从'react'导入React，{组件};
导入{
AppRegistry，
StyleSheet，
文本，
视图，
航海家
}来自“ react-native”；
从'./Splash'导入Splash；
从“ ./Login”导入登录名；

导出默认类DigitalReceipt扩展了组件{
render（）{
返回（
{
如果（route.sceneConfig）{
返回route.sceneConfig;
}
返回Navigator.SceneConfigs.FloatFromRight;
}} />
）;
}
renderScene（route，navigator）{
var routeId = route.id;
如果（routeId ==='Splash'）{
返回（

）;
}
如果（routeId ==='登录'）{
返回（

）;
}
返回this.noRoute（navigator）;

}
}

const styles = StyleSheet.create（{
容器： {
弹性：1，
justifyContent：“中心”，
alignItems：'中心'，
backgroundColor：'＃F5FCFF'，
}，
欢迎：{
fontSize：20，
textAlign：'居中'，
保证金：10，
}，
说明：{
textAlign：'居中'，
颜色：“＃333333”，
marginBottom：5，
}，
}）;

AppRegistry.registerComponent（'DigitalReceipt'，（）=> DigitalReceipt）;



Splash.js


从'react'导入React，{组件};
导入{
AppRegistry，
视图，
文本，
StyleSheet，
图片
}来自“ react-native”；
从“反应导航”导入{StackNavigator}；
从“ ./Login”导入登录名；

Splash类扩展了组件{
componentWillMount（）{
var navigator = this.props.navigator;
setTimeout（（）=> {
导航（'登录'）
}，1000）；
}

render（）{
const {navigation} = this.props.navigation;
返回（



数字收据


由React Native提供支持


）;
}
}
const SplashApp = StackNavigator（{
登录名：{屏幕：登录名}，
开机画面：{屏幕：开机画面}，
}）;

const styles = StyleSheet.create（{
包装器：{
backgroundColor：'#FFFFFF'，
弹性：1，
justifyContent：“中心”，
alignItems：'中心'
}，
标题：{
颜色：“＃2ea9d3”，
fontSize：32，
fontWeight：“粗体”
}，
字幕：{
颜色：“＃2ea9d3”，
fontWeight：“ 200”，
padding底部：20
}，
titleWrapper：{
弹性：1，
justifyContent：“中心”，
alignItems：'中心'
}，

商标：{
宽度：96，
高度：96
}
}）;

AppRegistry.registerComponent（'SplashApp'，（）=> SplashApp）;



Login.js


从'react'导入React，{组件};
导入{
AppRegistry，
视图，
文本，
StyleSheet，
图片
}来自“ react-native”；
从“反应导航”导入{StackNavigator}；
从'./Splash'导入Splash；

登录类扩展了组件{
静态navigationOptions = {
标题：“欢迎”，
};
render（）{
const {navigation} = this.props.navigation;
返回（


登入画面


）;
}

}
const LoginApp = StackNavigator（{
登录名：{屏幕：登录名}，
开机画面：{屏幕：开机画面}，
}）;
const styles = StyleSheet.create（{
包装器：{
backgroundColor：'#FFFFFF'，
弹性：1，
justifyContent：“中心”，
alignItems：'中心'
}，
标题：{
颜色：“＃2ea9d3”，
fontSize：32，
fontWeight：“粗体”
}
}）;
AppRegistry.registerComponent（'LoginApp'，（）=> LoginApp）;







请帮助我，如果发现任何愚蠢的代码错误，对不起。

谢谢

Answer 1

您可以尝试此示例。初始屏幕中不需要stacknavigator。

constructor(props){
    super(props);
    this.state = {
        timePassed: false,
    };
}

componentDidMount() {
    setTimeout( () => {
        this.setTimePassed();
    },1000);
}

setTimePassed() {
    this.setState({timePassed: true});
}

render() {
    if (!this.state.timePassed) {
        return <SplashScreen/>;
    } else {
        return <Login/>;
    }
}