ReactNative实现GitHub客户端流程

一、初始化项目

  1、在终端执行react-native init MyApp 创建的ReactNative项目版本号与你终端安装的ReactNative版本号相同

  2、在终端执行react-native init MyApp --version 0.44.0可指定ReactNative版本创建项目

二、TabNavigator使用

  1、在终端执行命令npm install react-native-tab-navigator --save进行安装(加上--save才会添加到package.json文件中)

  2、在index.ios.js文件中导入import TabNavigator from 'react-native-tab-navigator';

  3、在render()中加入代码

        <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:'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_trending'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_favorite'}
                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_favorite'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_my'}
                selectedTitleStyle={{color:'red'}}
                title='我的'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_trending.png')} />}
                onPress={() => this.setState({selectedTab: 'tb_my'})}>
                <View style={styles.page2}></View>
            </TabNavigator.Item>
          </TabNavigator>

  index.ios.js的完整代码为:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

export default class imoocc extends Component {
  constructor(props){
    super(props);
    this.state={
      selectedTab:'tb_popular',
    }
  }
  render() {
    return (
      <View style={styles.container}>
          <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:'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_trending'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_favorite'}
                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_favorite'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_my'}
                selectedTitleStyle={{color:'red'}}
                title='我的'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_trending.png')} />}
                onPress={() => this.setState({selectedTab: 'tb_my'})}>
                <View style={styles.page2}></View>
            </TabNavigator.Item>
          </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  page1:{
    flex:1,
    backgroundColor:'red',
  },
  page2:{
    flex:1,
    backgroundColor:'yellow',
  },
  image:{
    height:22,
    width:22
  },

});

AppRegistry.registerComponent('imoocc', () => imoocc);

Navigator的基本使用

  1、使用流程

屏幕快照 2018-09-18 上午11.13.14.png

  2、使用import {Navigator} from 'react-native-deprecated-custom-components';进行导入。页面在渲染的时候会调用renderScene方法

  3、示例

render() {
    return (

      <Navigator
            {/* 
              初始化路由，Navigator首先显示的是哪一个界面 
              默认页面, name: 默认页面组件名, component: 默认页面渲染组件
              */}
            
            initialRoute={{ name: 'Boy', component: Boy }}
            // 页面切换动画
            configureScene={(route) => {
                return Navigator.SceneConfigs.VerticalDownSwipeJump;
            }}
        
            {/* 页面在渲染的时候会调用  将页面参数和navigator注入渲染组件中 */}
            renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
            }}
      />

    );