关于React-native移植到安卓上

  官网有已经有相对来说,完整的教程,我这里只是结合大家的经验和错误,再写一篇实用性的。

1.首先用android studio新建一个项目,如果有了就不用新建了


再项目的根目录下打开命令行,或者说直接在android studio中使用Terminal输入npm init ,出现下图



出现这样的,第一个是项目名,比如我写test,第二是版本号,后面的就自己看需要了。entry point (入口这里,我写的是index.android.js),然后一直回车,看到有个要输入yes,就输入yes


第五步,这步是很关键的,不然后来会被坑(当前的最新版本是0.46.4但是会报一个undefined is not  an  Object 。。。。的错,等会上图,所以我最后使用的是0.44.0的版本,如果你实在想用0.46.4,我有个方法,需要请联系我。)

输入Terminal 里输入npm install --save react@16.0.0-alpha.6 react-native@0.44.0  然后等一会


好的,这里完了之后工程里会多出node_modules。

第六步

输入curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 等一下

第七步

打开根目录的package.json在srcipts的花括号中加上

"start": "node node_modules/react-native/local-cli/cli.js start"


那个test可以不要的。

第九步,在根目录下的build.gradle的allprojects中加上

maven {
    // All of React Native (JS, Android binaries) is installed from npm
    url "$rootDir/node_modules/react-native/android"
}


第十步,在app下的build.gradle中加上

  compile "com.facebook.react:react-native:+" // From node_modules.


如果出现这个错误,就在android的花括号里加上

  configurations.all {
            resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
        }


×××××××重点坑

第九步和第十步的顺序不要反了,如果你的react-native的包不是你使用的版本,是0.20.0的版本,请检查第九步



我这个就是对了,找到了指定版本

第十一步

接着,在 AndroidManifest.xml 清单文件中声明网络权限:

<uses-permission android:name="android.permission.INTERNET" />

如果需要访问 DevSettingsActivity 界面,也需要在 AndroidManifest.xml 中声明:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
接着在根目录下创建一个indrx.android.js

'use strict';

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

class HelloWorld extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello, World</Text>
      </View>
    )
  }
}

/*这里的填写你刚刚第二步npm init的那个名称*/
AppRegistry.registerComponent('test', () => HelloWorld);



接着,改造Mainactivity,当然你可以新建一个然后从主界面跳转到这个页面里边为了方便我这里直接改

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意这里的HelloWorld必须对应“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "test", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy();
        }
    }
}


有注释那里一个要注意,休息那个test和你的当时npm init的名称一样

ok到了这里,就算完了,请记得络权限一定要配好

在Terminal里输入react-native start

启动成功之后,开始运行你的项目(如果你用的Myappcation这个默认的名字就先删除你的应用在运行避免出错)

这样应该成功了

如果出现错误请给我留言。

如果有个fragmeng.v4什么的错误 将


将报红的那个版本改成23.0.1的试试

.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值