[@炯轩][¥20]如何将React Native集成至Android原生应用?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

[@炯轩][¥20]如何将React Native集成至Android原生应用?

2018-12-16 21:07:59 1989 2

如何将React Native集成至Android原生应用?

取消 提交回答
全部回答(2)
  • auto_answer
    2019-07-17 23:22:28

    步骤:

    在appbuild.gradle的dependencies标签下添加: compile "com.facebook.react:react-native:+";
    在appbuild.gradle的android标签下添加: configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:+' }
    在appbuild.gradle的androiddefaultConfig标签下添加: ndk { abiFilters "armeabi-v7a", "x86" }
    在build.gradle的allprojectsrepositories标签下添加: maven { url "$rootDir/reactnative/node_modules/react-native/android" }
    在gradle.properties内添加: android.useDeprecatedNdk=true

    创建一个activity文件RNActivity:
    public class RNActivity extends ReactActivity {

    @Nullable
    @Override
    protected String getMainComponentName() {
        return "demo1031";
    }

    }

    创建一个Application文件RNApplication:
    public class RNApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }
    
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    
    };
    
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
    
    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this,false);
    }

    }

    在AndroidManifest.xml内指定application路径android:name=".RNApplication"

    在项目目录下创建reactnative文件夹, 在reactnative文件夹创建package.json文件:
    {

    "name": "reactnative",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-beta.5",
        "react-native": "0.49.5"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0-beta.5"
    },
    "jest": {
        "preset": "react-native"
    }

    }

    在reactnative文件夹创建index.android.js文件:
    import React, { Component } from 'react';
    import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Button
    } from 'react-native';

    export default class Index extends Component {
    _onPress() {

    alert("我是react-native弹窗");

    }

    render() {

    return (
      <View style={styles.container}>
        <Button title="Button" color="#ff8500" onPress={()=> this._onPress()}/>
      </View>
    );

    }
    }

    const styles = StyleSheet.create({
    container: {

    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',

    },
    });

    AppRegistry.registerComponent('reactnative', () => Index);

    在项目目录文件夹reactnative下执行命令npm i, 然后再npm start
    使用Android studio运行项目, ok, 收工!

    假如报错: Unable to load script from assets 'index.android.bundle'..., 可以在项目main文件夹下新建文件夹assets, 然后在reactnative下运行命令: react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output ../app/src/main/assets/index.android.bundle --assets-dest ../app/src/main/res/

    作者:hello老文
    链接:https://www.jianshu.com/p/68940f43e557
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    0 0
  • 昵称重要吗
    2019-07-17 23:22:27

    Android工程内接入RN的SDK就可以,官网有文档的啊。

    0 0
添加回答
相关问答

1

回答

react native中设置按下按钮后执行某动作的代码怎么写?

2022-09-21 20:43:54 96浏览量 回答数 1

1

回答

react native中不具名的对象是什么?

2022-09-21 20:20:31 133浏览量 回答数 1

1

回答

react native中的构造器有什么用呢?

2022-09-21 20:24:17 85浏览量 回答数 1

1

回答

React Native是什么?

2022-09-14 17:38:26 144浏览量 回答数 1

1

回答

使用React Native分别在Android和IOS开发中要如何编写视图呢?

2022-09-12 14:29:33 300浏览量 回答数 1

1

回答

React Native是什么

2022-09-12 14:29:32 608浏览量 回答数 1

1

回答

React Native是否有办法即使在应用程序卸载后也能持久保存数据?

2020-01-07 13:35:56 729浏览量 回答数 1

1

回答

react native上的按钮文本始终为大写

2020-01-06 19:54:52 982浏览量 回答数 1

2

回答

学习React Native需要先学习React JS吗

2016-02-22 14:31:39 3575浏览量 回答数 2

2

回答

React Js 与React Native之间的关系是怎样的?

2016-02-22 14:32:53 2923浏览量 回答数 2
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
搭建React Native生态
立即下载
React Native项目实战优化之路
立即下载
Android插件化:从入门到放弃
立即下载