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
    })
  }

你可能感兴趣的:(ReactNative实现GitHub客户端流程)