rn 手动实现启动页

最新推荐文章于 2023-07-18 01:58:49 发布

神奇大叔

最新推荐文章于 2023-07-18 01:58:49 发布

阅读量261

点赞数

分类专栏： react native 文章标签： react native

本文链接：https://blog.csdn.net/weixin_43294560/article/details/108328949

版权

react native 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

(1)在index.js中挂载的组件是一个栈导航组件,该组件中包含启动组件和app组件

(2)然后在启动页组件中通过定时器跳转到其他组件

代码示例:
index.js

/**
 * @format
 */

 import React,{Component} from 'react'


import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import Launch from './pages/launch/index';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

class Power extends Component{

    render()
    {
        const Stack=new createStackNavigator()
        return(
            <NavigationContainer>
                <Stack.Navigator
                    initialRouteName='launch'
                >
                    <Stack.Screen name='launch' component={Launch} options={{headerShown:false}} />
                    <Stack.Screen name='app' component={App} options={{headerShown:false}} />
                </Stack.Navigator>
            </NavigationContainer>
        )
    }

}

AppRegistry.registerComponent(appName, () =>Power);

app.js:

import React,{Component} from 'react'
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {
  View,
  Text,
  StyleSheet,
  Image
} from 'react-native'
import Main from './pages/main/index'
import Half from './pages/halfHour/index'
import Search from './pages/search/index'

class App extends Component{
    state={
      selectedTab:''
    }

    render()
    {
        const Stack=new createStackNavigator();
        return(
            // <NavigationContainer>
              <Stack.Navigator initialRouteName='main'>
                <Stack.Screen name='main' component={Main} options={{headerShown:false}}/>
                <Stack.Screen name='half' component={Half} options={{headerShown:false}}/>
                <Stack.Screen name='search' component={Search} options={{headerShown:false}}/>
              </Stack.Navigator>
            // </NavigationContainer>
        )
    }
}

const styles = StyleSheet.create({


})

export default App

启动页组件：

import React,{Component} from 'react'
import {
  View,
  Text,
  StyleSheet,
  Image,
  Dimensions
} from 'react-native'

class Launch extends Component{

    componentDidMount()
    {
        let that=this;

        setTimeout(()=>{
            that.props.navigation.navigate('app');
        },3000)
    }
    
    render()
    {
        return(

            <View>
                <Image style={{width:Dimensions.get('window').width,height:Dimensions.get('window').height}} source={{uri:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1431796901,1804537979&fm=26&gp=0.jpg'}} />

            </View>
        )
    }
}

const styles = StyleSheet.create({


})

export default Launch