rn 手动实现启动页

拼搏现实的明天。 2021-07-24 20:16 403阅读 0赞

(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

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/c21144433c554a389e63e483025b61e9.png