原生Android集成React Native_xiangzhihong的专栏文章_微信文章

使用React Native从零开始开发一款移动应用是一件很惬意的事情，但对于一些已经上线的产品，完全摒弃原有应用的历史沉淀，全面转向React Native是不现实的。因此，使用React Native去统一原生Android、iOS应用的技术栈，把它作为已有原生应用的扩展模块，是目前混合开发的最有效方式。首先，在原生Android项目目录下执行以下命令创建一个package.json文件。

yarn init
复制代码

然后，根据提示输入对应的配置信息。等待命令执行完成之后，我们会发现Android项目的根目录多了一个package.json文件。接下来，使用如下命令添加React和React Native运行环境的支持脚本。

yarn add react react-native
复制代码

执行完命令后，会发现Android项目的根目录下多了一个node_modules文件夹，里面包含了React Native开发也运行所需的依赖模块，原则上这个目录是不能复制、移动和修改的。接下来，使用文本编辑器打开package.json文件，配置React Native的启动脚本，如下代码。

"scripts": {
    "start": "yarn react-native start",
  },

复制代码

此时，package.json文件的完整内容如下所示。

{
  "name": "AndroidDemo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.1",
    "react-native": "^0.63.4"
  },
  "scripts": {
    "start": "yarn react-native start"
  }
}
复制代码

然后，在Android项目的根目录下创建一个index.js文件，该文件是React Native的入口文件，代码如下。

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, React Native</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    hello: {
        fontSize: 20,
        textAlign: 'center'

原生Android集成React Native

正文

原生Android集成React Native

请到「今天看啥」查看全文