React-Native学习

中文文档：https://reactnative.cn/docs/getting-started.html

为方便快速查找，此处仅做步骤记录

打日志方案：console.error(4444)

0.环境配置参照上面文档内容

1.构建、启动项目

注意：项目目录不能有中文字符

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

    "react": "16.8.3",
    "react-native": "0.59.2",

2.如果出现以下错误(不知道是不是版本的问题，新构建的项目就报这个错)

Error: Unable to resolve module `./index` from `\node_modules\react-native\scripts/.`: The module `./index` could not be found from `\node_modules\react-native\scripts/.`. Indeed, none of these files exist:

解决方案：https://stackoverflow.com/questions/55318326/react-native-cant-find-module-index-on-fresh-initialized-app
在目录\node_modules@react-native-community\cli\build\commands\runAndroid\runAndroid.js 下编辑

const procConfig = {

    // delete this line    
    cwd: scriptsDir

    // add this line
    cwd: process.cwd()

};

3.安装react-navigation(导航栏)

文档：https://reactnavigation.org/docs/en/getting-started.html
注意：一定要看英文的，更新速度太快了，不然有坑

npm i react-navigation -S

版本：

 "react-navigation": "^3.5.1"

引入组件

import React from 'react';
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}

const AppNavigator = createStackNavigator({
    Home: {
        screen: HomeScreen
    }
});


export default createAppContainer(AppNavigator);

报错：null is not an object （evaluating ‘RNGesturehandleNavigator.’);
解决：

yarn add react-native-gesture-handler -S
react-native link react-native-gesture-handler

4.隐藏某些页面的header

const navigator = createStackNavigator(
    {
        ChooseSystem: {
            screen: ChooseSystem,
            navigationOptions: ({navigation}) => ({
                tabBarVisible: false, // 隐藏底部导航栏（这里是重点，实现这个页面有没有header）
                header:null,  //隐藏顶部导航栏
            })
        },
        TabPage: {
            screen: TabPage,
            navigationOptions: ({navigation}) => ({
                title: `111`,
            })
        },
    },
    {
        initialRouteName: "ChooseSystem",
        headerMode: 'float', //这里设置每个页面都有header
        mode: 'modal',// 定义了渲染和过渡的风格:
    }
);