已有Android项目集成react native

已有Android项目集成react native

效果

环境

Android studio 4.0.1

gradle

buildscript {
   
    repositories {
   
        google()
        jcenter()
    }
    dependencies {
   
        classpath "com.android.tools.build:gradle:4.0.1"

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

#Thu Feb 18 17:57:36 CST 2021
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip

前置准备

Android P(9.0) http网络请求的问题

参考官网，把这些改安装的安装了

集成步骤

0. 新建个Android项目

1. 初始化项目

根目录输入以下命令
npm init

在第一个包名输入自己项目的包名，其他一直按回车即可

2. 添加脚本
   在根目录会生成package.json这个文件，将启动脚本加入进去
   "start": "node node_modules/react-native/local-cli/cli.js start"

3. 安装React 和React Native

根目录输入以下命令
npm install --save react react-native

4. 在日志中找到这句话
   
   继续在根目录中执行
   npm i -S react@16.3.1
   

5. 下载.flowconfig文件(非必须)
   curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

6. 新建index.android.js
   项目根目录下创建index.android.js文件，目录内容如下：

import React from "react";
import { AppRegistry, StyleSheet, Text, View } from "react-native";

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  hello: {
    fontSize: 20,
    textAlign: "center&#