[0.57]ReactNative-仿写Github客户端[一]

目标：
1.完成导航框架的搭建
2.完成欢迎页面的搭建

步骤
1.配置环境
2.创建工程
3.创建欢迎页面WelcomePage，主页HomePage,详情页DetailPage
4.用导航包装起来。
目标效果。
启动APP后首先显示为欢迎页面。2秒钟后切换到主页面

项目结构详解

index.js
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import Appnavigator from "./navigators/Appnavigator";

AppRegistry.registerComponent(appName, () => Appnavigator);

程序入口文件。import文件包含App注册组件，App名称 和要导入的导航入口

HomePage.js

import React,{Component} from 'react';
import {Text,StyleSheet,View} from 'react-native';
export default  class HomePage extends Component{
    render(){
        return (
            <View style={styles.container}>
                <Text>
                    Home!
                </Text>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center'
    }
})

App主页面。 包含React控件和所需要的基本组件。默认显示一个Home文字

WelcomePage.js
import React,{Component} from 'react';
import {Text,StyleSheet,View} from 'react-native';
import NavigatorUtils from "../../navigators/NavigatorUtils";
export default  class WelcomePage extends Component<Props>{


    //启动页增加定时器
    componentDidMount(){
        this.timer=setTimeout(()=>{
            //优化前
            // const {navigation} = this.props;
            // navigation.navigate('HomePage');
            //优化后
            NavigatorUtils.resetHomePage({
               //此处的navigation名称要与工具类处声明一致
                navigation:this.props.navigation
            })
        },2000);
    }

    componentWillUnmount(){
        this.timer && clearTimeout(this.timer);
    }

    render(){
        return (
            <View style={styles.container}>
                <Text>
                    Welcome!
                </Text>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center'
    }
})

注解:同HomePage内容。
在 componentDidMount()方法中添加定时器完成延时跳转效果
需要注意的是，使用定时器后需要在componentWillUnmount()方法中进行释放。防止内存泄露。

Appnavagator.js
import {createStackNavigator,createSwitchNavigator,createAppContainer} from 'react-navigation'
import WelcomePage from "../js/pages/WelcomePage";
import DetailInfoPage from "../js/pages/DetailInfoPage";
import HomePage from "../js/pages/HomePage";

const InitNavigator=createStackNavigator({
    WelcomePage:{
        screen:WelcomePage,
        navigationOptions:{
            header:null,
        }
    },

})

const MainNavigator=createStackNavigator({
    HomePage:{
        screen:HomePage,
        navigationOptions:{
            header:null,
        }
    },
    DetailInfoPage:{
        screen:DetailInfoPage,
        navigationOptions:{
            header:null,
        }
    }
})

const SwitchNavigator=  createSwitchNavigator({
    Init:InitNavigator,
    Main:MainNavigator
},{
    navigationOptions:{
        header:null,
    }
})
3以后需要用appcontainer来包装一下
export default createAppContainer(SwitchNavigator)

封装导航组件。react-navigation
目前为3.0版本。
使用步骤需要在终端执行3条命令进行框架导入

1. yarn add react-navigation

2.yarn add react-native-gesture-handler

3react-native link react-native-gesture-handler

按顺序执行即可。 然后模拟器需要关闭重启。 使用热重载会报错。
createStackNavigator:导航容器，用来包裹普通页面。
createSwitchNavigator:可以用来进行页面切换。
createAppContainer:3.0后需要用这个容器包裹一下组件才能导出。
navigationOptions:{
header:null,
} 用来屏蔽导航栏。

页面功能
用来封装一个欢迎页面导航，一个主页面导航。放入到switch中导航中然后导出

NavigatorUtils.js
/**
 * 导航工具类
 *
 */
export default class NavigatorUtils {
    /**
     * 跳转到主页
     * @param navigation 上一页面传过来的参数
     */
    static resetHomePage(params){
        const {navigation} = params;
        navigation.navigate('HomePage');
    }

    /**
     * 返回上一页
     * @param navigation
     */
    static goBack(navigation){
        navigation.goBack();
    }
}

主要用来对页面导航跳转的封装。

需要注意的是 navigation这个参数名与使用处一定要一致。不然可能造成找不到导航的情况。刚开始在这卡住了好久。

Github地址:https://github.com/yanhuaxuanlan/RN_Github.git
刚开始学习。欢迎各位指正。