react-native学习(2)

最新推荐文章于 2022-12-28 18:16:08 发布

惟是少年时

最新推荐文章于 2022-12-28 18:16:08 发布

阅读量470

点赞数 1

分类专栏： react-native

react-native 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建Android项目（已有项目跳过）

打开Android studio

14752189589833.jpg
输入项目名称，选择项目目录，点击next

14752190447690.jpg

14752191238908.jpg

14752192158859.jpg

14752193112367.jpg

至此项目创建完成（需要注意的是最新的React Native支持最新SDK版本为16 android4.1）

React Native集成到上面我们创建的ReactNativeAPPDemo中

参考Facebook react native文档

进入项目根目录，添加JS到项目中-点击Android studio中的Terminal（如下图）

14752200412681.jpg

分别执行一下语句

  npm init
  npm install --save react react-native
  curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

init 主要根据提醒生成package.json文件
install --save react react-native 安装React 和React Native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 下载.flowconfig文件
参考图片

14752207192510.jpg

查看项目中有node_modules，说明react和react native 安装完成

14752214758622.jpg

在项目根目录添加.flowconfig

参考下图

14752216108448.jpg

也可以手动创建在浏览器打开https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig网址复制内容创建文件

14752217925862.jpg

ReactNativeAppDemo配置相关内容

添加"start": "node node_modules/react-native/local-cli/cli.js start" 到package.json文件下 scripts标签修改前

14752220951994.jpg

修改后

14752221462812.jpg

添加index.android.js文件到项目中

14752222197635.jpg

 'use strict';
 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',
     margin: 10,
   },
 });
 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

至此React native配置基本完成

App build.gradle配置
```
dependencies {
 ...
 compile "com.facebook.react:react-native:+" // From node_modules.
}
```
这里注意不要使用maven中的，因为我们使用的是我们本地node_modules中的，注意最新版本中支持的是23，appcompat-v7:23.0.1，暂时没有试24的api

14752229775637.jpg

整个工程build.gradle配置
>

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

14752256546683.jpg

添加<uses-permission android:name="android.permission.INTERNET" />到AndroidManifest.xml:
确定External Libraries

14752240537114.jpg

14752241070972.jpg

确定是下是最新的，例如确定是0.34.1而不是0.20.1，如果出现请检查

  maven {
            `url "$rootDir/../node_modules/react-native/android"`//地址是否正确
        } 
 修改url "$rootDir*/..*/node_modules/react-native/android"为url "$rootDir/node_modules/react-native/android"

添加native code

官方给出的

14752232872479.jpg

到时最新版本中提供了更加简单的方式，没错就是继承。

这里有个坑需要注意了，采用最新的继承方式，界面是出来了，但是当你修改了index.android.js文件中的内容后，是无法实时更新的，后来改为官方指导的写法

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private static final int OVERLAY_PERMISSION_REQ_CODE = 1;
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {  //不允许应用在上层显示
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                        Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
            }else{
                initView();
            }
        }else{
            initView();
        }
    }
    private void initView() {
        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, "RnTest2", null);
        setContentView(mReactRootView);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (!Settings.canDrawOverlays(this)) {
                    // SYSTEM_ALERT_WINDOW permission not granted...
                    Toast.makeText(this,"拒绝",Toast.LENGTH_SHORT).show();
                }else{
                    initView();
                }
            }
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_MENU) && (mReactInstanceManager != null)) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

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

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

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

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

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

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

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

}

这里需要注意权限，同时manifest.xml中还需要对DevSettingActivity配置一下

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

在这里我们也需要自定义一个Application否则运行时会报错，不信的小伙伴可以试一试

14752259787709.jpg

14752260351714.jpg

到此为止，ReactNative 集成到已有项目中完成！！！迫不及待的运行试试吧！！

14752261248709.jpg

在Terminal中运行 npm start，看到下图表示启动成功

14752261852021.jpg

运行以后发现如下错误

14752468221176.jpg

react-native报错：Could not get BatchedBridge, make sure your bundle is packaged correctly
莫紧张，这是因为bundle没有打包好。找不到编译打包后的js文件。其实就是android studio默认的寻找js文件地址和react-native自己的工具编译所使用的地址不同。

解决方法

方法一

进入项目，在android/app/src/main下新建assets目录。执行以下命令

$> react-native start > /dev/null 2>&1 &  
$> curl "http://localhost:8081/index.android.bundle?platform=android" -o
> "app/src/main/assets/index.android.bundle"

在项目根目录下执行

<!--$> (cd android/ && ./gradlew assembleDebug)-->
$> (cd 项目名称/ && ./gradlew assembleDebug)

把创建的apk安装到android设备

方法二

进入项目，在android/app/src/main下新建assets目录
启动服务器

$>react-native start
$>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/

在assets文件夹下会生成index.android.bundle文件，把创建的apk文件安装到android设备

方法三

进入项目，在android/app/src/main下新建assets目录
在package.json中配置下面代码

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
  },

个人推荐使用方法三,方法三解决不了推荐方法二手动执行
修改刚刚的package.json文件

14752486039953.jpg

如果真机(模拟器)需要执行

adb reverse tcp:8081 tcp:8081

一定要确定连接网络哦！！

14752520319630.jpg

14752520729313.jpg

开心的进行开发吧！

其他可能遇到的问题

ReactNative兼容64位Android手机

libgnustl_shared.so" is 32-bit instead of 64-bit类似错误

解决方法

在项目的根目录的 gradle.properties 里面添加一行代码
android.useDeprecatedNdk=true.

在 build.gradle 文件里添加以下代码

android {
...
defaultConfig {
   ...
   ndk {
       abiFilters "armeabi-v7a", "x86"
   }

   packagingOptions {
       exclude "lib/arm64-v8a/librealm-jni.so"
   }
}
}

最后感谢

http://majing.io/questions/589
http://www.cnblogs.com/tony-yang-flutter/p/5864578.html
https://blog.yourtion.com/update-react-native-029-bug.html
http://stackoverflow.com/questions/38870710/error-could-not-get-batchedbridge-make-sure-your-bundle-is-packaged-properly/38874952
http://blog.csdn.net/b992379702b/article/details/52234479

Genymotion模拟器运行显示没有连接到developement server如下图

Paste_Image.png

先检查是否连接到网络
点击模拟器中Menu菜单弹出下面图片，点击Dev Settings

Paste_Image.png
点击Debugging 下面的Debug Server host & port for device填写地址和端口

Paste_Image.png

Paste_Image.png

上文中使用到的项目ReactNativeAPPDemo链接: https://pan.baidu.com/s/1i4GkeKt 密码: vwym

最近小伙伴反馈0.39.0上面没有ReactApplication接口，请看我的截图有问题QQ联系我共同探讨

我的项目中依然可以看到，是不是有的小伙伴gradle文件配置的问题，仔细检查下，确实有问题的小伙伴，请加QQ私聊

最后，感谢这两篇博客：

http://blog.csdn.net/coder_nice/article/details/52933187

http://www.jianshu.com/p/99f2a4c21986

惟是少年时

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-native学习(2)

创建Android项目（已有项目跳过）打开Android studio14752189589833.jpg输入项目名称，选择项目目录，点击next14752190447690.jpg14752191238908.jpg14752192158859.jpg1475219311236
复制链接

扫一扫