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()中加入代码

        
             }
                renderSelectedIcon={() => }
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_popular'})}>
                
            
             }
                renderSelectedIcon={() => }
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_trending'})}>
                
            
             }
                renderSelectedIcon={() => }
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_favorite'})}>
                
            
             }
                renderSelectedIcon={() => }
                onPress={() => this.setState({selectedTab: 'tb_my'})}>
                
            
          

  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 (
      
          
             }
                renderSelectedIcon={() => }
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_popular'})}>
                
            
             }
                renderSelectedIcon={() => }
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_trending'})}>
                
            
             }
                renderSelectedIcon={() => }
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_favorite'})}>
                
            
             }
                renderSelectedIcon={() => }
                onPress={() => this.setState({selectedTab: 'tb_my'})}>
                
            
          
      
    );
  }
}

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 (
       {
               return Navigator.SceneConfigs.VerticalDownSwipeJump;
           }}
           /* 页面在渲染的时候会调用  将页面参数和navigator注入渲染组件中 */
           renderScene={(route, navigator) => {
               let Component = route.component;
               return 
           }}
     />
    )
  }

  4、Navigator方法

getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
resetTo(route) - 跳转到新的场景，并且重置整个路由栈
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。
popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。

  5、Navigator属性

  initialRoute object

  提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。

  initialRoute示例

           /*初始化路由，Navigator首先显示的是哪一个界面。默认页面,
            name: 默认页面组件名, component: 默认页面渲染组件*/
           initialRoute={{ name: 'Boy', component: Boy }}

  configureScene function

  可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象

   configureScene示例

(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

  或者

         // 页面切换动画
           configureScene={(route) => {
               return Navigator.SceneConfigs.PushFromRight;
           }}

  SceneConfigs的值为

Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

  renderScene function

  必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。

  renderScene示例

(route, navigator) =>
  

  或者

         /* 页面在渲染的时候会调用  将页面参数和navigator注入渲染组件中 */
           renderScene={(route, navigator) => {
               let Component = route.component;
               return 
           }}

  initialRouteStack [object]

  提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。

  navigationBar node

  可选参数，提供一个在场景切换的时候保持的导航栏。

  navigator object

  可选参数，提供从父导航器获得的导航器对象。

  onDidFocus function

  每当导航切换完成或初始化之后，调用此回调，参数为新场景的路由

  onWillFocus function

  会在导航切换之前调用，参数为目标路由

  sceneStyle [View#style]

  将会应用在每个场景的容器上的样式。

  

弹出视图(三方：react-native-popover)

直接把popover.js文件导入项目中

示例代码：

this.closePopover()}
            contentStyle={{backgroundColor:'#343434',opacity:0.82}}
        >
            {timeSpanTextArray.map((result,i,arr)=>{
              return this.onSelectTimeSpan(arr[i])}
                  >
                  {arr[i].showText}
              
            })}

        

弹出视图的代码:其中button为自己设置的标识

showPopover(){
    this.refs.button.measure((ox,oy,width,height,px,py) => {
      this.setState({
        isVisible:true,
        buttonRect:{x:px,y:py,width:width,height:height}
      });
    });
  }

关闭弹出视图的代码:

closePopover(){
    this.setState({
        isVisible:false
    })
  }