初始化React-Native项目

前置条件：

因为，reactnative的项目，是无法使用cnpm安装依赖的。

所以，需要使用facebook团队提供的yarn包管理工具。

一、创建RN项目

新建一个空文件夹，然后在里面打开cmd,并执行命令npx react-native init RN --version 0.62.2(必须跟上版本号！！！！！)

注意：项目路径不能有中文不能有中文不能有中文！！！！！！！！！！！
注意：我们这里安装的是新版的react-native,如果你之前有全局安装过react-native-cli，请先卸载，否则可能会创建失败

静待项目下载安装完成即可！

二、如果配置镜像加快项目启动速度（不是必须）

找到android目录下面的build.gradle文件，做如下修改

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
    }
    repositories {
        //添加这三行
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        //注释掉google和jcenter
        //google()
        //jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.2")

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        //添加这三行
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        //注释掉google和jcenter
        //google()
        //jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

三、在C盘手动配置gradle文件（不是必须）

这一步不是必须，后面执行npx react-native run-android或者是yarn android的时候，会自动下载gradle到C盘用户目录，但是会很慢需要翻墙，如果实现有了这个文件之后，则不再需要在启动项目的时候下载了
如果每个这个文件，则在运行项目的时候，会出现如下提示

找到这个路径，如果没有找到这个路径则，先执行第四部，在来执行本步骤
把gradle-6.0.1-all文件复制进去即可（如果里面有了，可把他先删除）

四、准备运行项目到到Android模拟器/真机

1）先检测是否已连接模拟器或真机

adb devices

这里代表已经在5554端口上,连接了一台设备.

2） Cd到刚才创建项目目录

执行npx react-native run-android 或者 yarn android 启动项目

启动后会弹出两个窗口！

················

进入漫长等待，第一次运行会下载N多相关文件！！！！

安心等待即可，不要随便乱点！容易引起卡死

项目启动成功！

可能的问题：

此错表示项目路径不能有中文！！！！！！！！！！！！！！！！！！！！！！！！！！！否则可能会构建失败！！！！！！！

解决办法：在纯英文目录创建项目

CPU与虚拟化技术不兼容

有的电脑默认虚拟化技术是Disable状态，开启为Enable状态

解决办法：

a. 重新启动电脑。

b. 开机按F10或F2键或DEL（根据主板型号不同，快捷键不同！不熟同学先百度下自己的品牌和型号）进入BIOS设置

c. 检查设置，并查找英特尔®虚拟化技术（别名：英特尔VT-X）。

BIOS关键字 Intel Virtuallzation 设置为开启orEnable

d. 修改后，保存退出启动电脑。

如何菜单键打不开调试菜单，可以执行如下命令 adb shell input keyevent 82

当前的android手机，menu键已经没有。所以在模拟器上，提供了ctrl+M快捷键，可能在某些环境下不好使。

这时，可以在命令行中，直接使用adb命令来传输menu键调用。

Cmd==》adb shell input keyevent 82

如何刷新：

在这个命令窗口按r键可以实现刷新，按d键也可以打开开发菜单

项目js服务器没有开启

这就是服务没有开启，手动开启服务：

CMD==> yarn start

手机测试网址http://localhost:8081/index.bundle?platform=android

就第一次启动，会实时去编译程序，会非常慢！

VsCode插件

React Native Tools

View in Browser

RN自定义组件

rn自定义组件和react几乎一模一样

创建并导出自定义组件


/**
 * 1. 引入核心模块
 * 2. 书写并暴露组件
 * 
 */
import React,{Component} from 'react';
import {View,Text} from 'react-native';


export default class Hello extends Component{
    render(){
        return(
            <View>
                <Text>Hello</Text>
            </View>
        )
    }
}

使用自定义组件

import Hello from '路径';

...
render(){
    return <Hello/>
}

RN常用组件View&Text介绍

View相当于div

Text相当于span，文本必须写在Text标签之间，否则会报错，而且文本样式必须写在Text标签之上，里层Text会继承外层Text的样式

RN中可以通过StyleSheet创建样式对象

行内样式

//style属性接受对象
<Text style={{color:'red'}}>Hello </Text>
//style属性接受数组
<Text style={[{color:'red'},{fontSize:20}]}>Hello </Text>

通过StyleSheet提取样式

import React ,{Component} from 'react';
import {StyleSheet} from 'react-native';
class Hello extends Component{
    render(){
        return <>
            <Text style={[styles.myText,styles.myTextFont]}>hello</Text>
        </>
    }
}
const styles = StyleSheet.create({
    //key(样式对象的名称):value（具体的样式）
    myText:{
        color:'red',
    },
    myTextFont:{
        fontSize:20
    }
});

RN中唯一的布局方式Flex

flex布局常用属性

justifyContent: center | space-between | space-around (控制主轴方向上的元素的排版)
alignItems:center | flex-start | flex-end （控制侧轴方向上元素的排版）
flexDirection:row | column (决定主轴方向是水平方向还是垂直方向)
- 注意：在rn里面flex盒子的主轴方向默认是垂直方向

react-navigation

react-navigation和react-router-dom类似，只不过react-navigation用于为android/ios端，提供完整的路由解决方案

一、在rn项目中引入react-navigation(android端)

下载安装react-navigation
```
yarn add @react-navigation/native
```

下载react-navigation相关依赖

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

在入口js文件或根组件中引入react-native-gesture-handler，并且用NavigationContainer把整个项目的组件包裹起来

import 'react-native-gesture-handler';//必须放在第一行
import  React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* 这里一般是根组件 */}</NavigationContainer>
  );
}

二、配置stack navigator

下载安装
```
yarn add @react-navigation/stack
```

配置登录、注册、首页


import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';



const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
    {/*
        initialRouteName可以指定默认首页渲染的路由名称
    */}
      <Stack.Navigator initialRouteName="Home">
      {/*
        1. name表示当前路由的名称
        2. component表示当前路由所要渲染的组件
        3. options可以对当前页面进行某些配置，比如页面顶部的标题可通过title配置
        4. 如果不指定初始路由名称（即通过initialRouteName指定的路由名称），则默认第一个Stack.Screen就是首页
        
      */}
        <Stack.Screen name="Login" component={Login} options={{title:"登录"}}/>
        <Stack.Screen name="Reg" component={Reg} />
        <Stack.Screen name="Home" component={Home} options={{
          title:'主页',//标题栏文本
          headerTitleStyle:{
            color:'#fff',//标题文本颜色
          },
          headerStyle:{
            backgroundColor:'green',//标题背景颜色
            elevation: 0,//去除阴影
          }
        }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function Login() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>登录</Text>
    </View>
  );
}

function Reg() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>注册</Text>
    </View>
  );
}

function Home() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>首页</Text>
    </View>
  );
}

export default App;

路由跳转，
- 凡是用于配置Stack.Screen的组件都会被自动注入navigation属性用于路由的跳转,navigation对象的属性如下

//例如从登陆页面跳转到主页
this.props.navigation.navigate('Main');
//或者
this.props.navigation.push('Main');
//或者
this.props.navigation.replace('Main');//replace使用后不再能返回到上一个页面

三、配置BottomTabNavigator

下载安装@react-navigation/bottom-tabs
```
yarn add @react-navigation/bottom-tabs
```

配置

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();
const HomeIcon = ({size,focused})=>focused ? <Image style={{ width: size, height: size }} source={require('../assets/imgs/ic_tab_home_active.png')} /> : <Image style={{ width: size, height: size }} source={require('../assets/imgs/ic_tab_home_normal.png')} />;
function Main() {
  return (
    <Tab.Navigator  tabBarOptions={{
                activeTintColor:'green',//激活的tab文本颜色
            }}>
      <Tab.Screen name="Home" component={HomeScreen} options={{
                    tabBarLabel: '首页',//tab label文本
                    tabBarIcon:HomeIcon,//tab icon
                }} />
   <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

react-native《二》