rn 整体的启动流程

最新推荐文章于 2024-03-27 14:31:29 发布

fire-fire-fox

最新推荐文章于 2024-03-27 14:31:29 发布

阅读量633

点赞数

本文链接：https://blog.csdn.net/wangrong111222/article/details/85201191

版权

react -native 的启动流程

App启动 -> index.js -> setup.js -> WelcomePage.js. -> HomePage.js

1，index.js. js入口部分

/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import Setup from './js/pages/setup'
AppRegistry.registerComponent(appName, () => Setup);

2，setup.js 相关组件以及服务的的初始化

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Image,ListView,Text} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components'
import Welcome from './WelcomePage'
// function setup () {
//   // 进行一些初始配置
//   class Root extends Component{
//     renderScene(route,navigator){
//        let Component =  route.component;
//        return <Component  {...route.params }  navigator={navigator}/>
//     }
//     render(){
//       return(<Navigator
//           initialRoute={{component:Welcome}}
//           renderScene={(route,navigator)=>this.renderScene(route,navigator)}
//       />)
//     }
//   }
//    return <Root/>  //返回根组件
// }
//
// module.exports=setup;

// 进行一些初始配置
export default class Root extends Component{
  renderScene(route,navigator){
    let Component =  route.component;
    return <Component  {...route.params }  navigator={navigator}/>
  }
  render(){
    return(<Navigator
        initialRoute={{component:Welcome}}
        renderScene={(route,navigator)=>this.renderScene(route,navigator)}
    />)
  }
}

3，WelcomePage.js 轮播图

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Image,ListView,Text} from 'react-native';
import NavigationBar from "../common/NavigationBar"
import Homepage from "./HomePage"
export default class WelcomePage extends Component{

  componentDidMount(){
    this.timer=setTimeout(()=>{
      this.props.navigator.resetTo({
        component:Homepage
      })
    },2000)
  }
  componentWillUnmount(){
    this.timer&&clearTimeout(this.timer)
  }

   render(){
     return(<View style={styles.container}>
       <NavigationBar
           title='welcome'
           style={{backgroundColor:'blue'}}
       />
       <Text style={styles.text}>wlecome</Text>
     </View>)
   }
}
const styles =  StyleSheet.create({
  container:{

    backgroundColor:'gray',
    justifyContent:'center',
  },
  text:{
    fontSize:20,

  }
})

4，HomePage.js

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Image,ListView,Text} from 'react-native';
import NavigationBar from "../common/NavigationBar"
import TabNavigator from "react-native-tab-navigator";

export default class HomePage extends Component{
  constructor(props){
    super(props);
    this.state={
      selectedTab:'tb_popular',
    }
  }
  render(){
    return(
        <View style={styles.container}>
          <NavigationBar
              title='welcome'
              style={{backgroundColor:'blue'}}
          />
         <TabNavigator>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_popular'}
              selectedTitleStyle={{color:'red'}}
              title="最热"
              renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_polular.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('../../res/images/ic_polular.png')} />}
              badgeText="1"
              onPress={() => this.setState({ selectedTab: 'tb_popular' })}>
            <View style={styles.page1}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_trending'}
              selectedTitleStyle={{color:'yellow'}}
              title="趋势"
              renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_trending.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'yellow'}]} source={require('../../res/images/ic_trending.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_trending' })}>
            <View style={styles.page2}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_favorite'}
              selectedTitleStyle={{color:'blue'}}
              title="收藏"
              renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_unstar_navbar.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'blue'}]} source={require('../../res/images/ic_unstar_navbar.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_favorite' })}>
            <View style={styles.page3}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_my'}
              selectedTitleStyle={{color:'pink'}}
              title="我的"
              renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_my.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'pink'}]} source={require('../../res/images/ic_my.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_my' })}>
            <View style={styles.page4}></View>
          </TabNavigator.Item>
        </TabNavigator>
        </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  page1:{
    flex:1,
    backgroundColor:'red',
  },
  page2:{
    flex:1,
    backgroundColor:'yellow',
  },
  page3:{
    flex:1,
    backgroundColor:'blue',
  },
  page4:{
    flex:1,
    backgroundColor:'pink',
  },
  image:{
    width:22,
    height:22
  }
});