美文网首页
React Native搭建

React Native搭建

作者: Android_冯星 | 来源:发表于2018-07-09 16:56 被阅读0次

按照官方文档搭建:
https://reactnative.cn/docs/0.51/getting-started.html

  • 初始化 命令
    react-native init SampleAppMovies

问题和解决

  • application has not been registered


    image.png

首先查看下index.js文件是否注册正确
在终端运行的项目是不是你要运行的项目。(解决)

gradle权限问题

Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

Starting JS server...
Running adb -s UYT7N17922000080 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && ./gradlew installDebug)...
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

(node:13346) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'message' of undefined
    at handleError (/Users/fengxing/ReactNative/HelloRN/node_modules/react-native/local-cli/cliEntry.js:35:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:13346) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:13346) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

解决方案:
https://github.com/facebook/react-native/issues/8868

检查android / gradlew上的权限 他们应该是755而不是644 在您的应用程序根文件夹中运行
chmod 755 android/gradlew然后运行react-native run-android它应该再次运作。

缺少依赖

UnhandledPromiseRejectionWarning: UnableToResolveError: Unable to resolve module create-react-class from /Users/fengxing/ReactNative/HelloRN/node_modules/native-base/dist/src/basic/Picker.android.js: Module does not exist in the module map or in these directories:
  /Users/fengxing/ReactNative/HelloRN/node_modules/native-base/node_modules
,   /Users/fengxing/ReactNative/HelloRN/node_modules

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
    at p.catch.error (/Users/fengxing/ReactNative/HelloRN/node_modules/react-native/packager/react-packager/src/node-haste/DependencyGraph/ResolutionRequest.js:365:19)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:19291) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1922)
(node:19291) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
  • 问题的原因是没有native-base的依赖
  • 解决的办法:
    添加依赖:
    npm install native-base --save
    react-native link

Android创建原生模块 包空指针

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
}
这个方法不能返回null。

解决办法:

public class RNSpinkitPackage implements ReactPackage{
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    return Collections.emptyList();
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    List<ViewManager> list = new ArrayList<>();
    list.add(new RNSpinkit(reactContext));
    return list;
}

Android 创建原生模块

06-29 14:53:11.746 21932-21932/com.helloworld E/unknown:React: Exception in native call
                                                               java.lang.IllegalStateException: Native module ToastModule tried to override ToastModule for module name ToastAndroid. If this was your intention, set canOverrideExistingModule=true
                                                                   at com.facebook.react.cxxbridge.NativeModuleRegistry.<init>(NativeModuleRegistry.java:53)
                                                                   at com.facebook.react.XReactInstanceManagerImpl.createReactContext(XReactInstanceManagerImpl.java:895)
                                                                   at com.facebook.react.XReactInstanceManagerImpl.access$600(XReactInstanceManagerImpl.java:110)
                                                                   at com.facebook.react.XReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(XReactInstanceManagerImpl.java:214)
                                                                   at com.facebook.react.XReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(XReactInstanceManagerImpl.java:193)
                                                                   at android.os.AsyncTask$2.call(AsyncTask.java:345)
                                                                   at java.util.concurrent.FutureTask.run(FutureTask.java:266)
                                                                   at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
                                                                   at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
                                                                   at java.lang.Thread.run(Thread.java:782)

解决办法:
在模块中重写


    @Override
    public boolean canOverrideExistingModule() {
        return true;
    }

报错内容如下:

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Error: more than one library with package name 'com.projectseptember.RNGL'
  You can temporarily disable this error with android.enforceUniquePackageName=false
  However, this is temporary and will be enforced in 1.0

相当的沮丧,看 android/settings.gradleandroid/app/build.gradle 之后,发现 @fangwei716 重复引入了gl-react-native

android/settings.gradle 多引入了 :gl-react-native, 删掉如下行

include ':gl-react-native'
project(':gl-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/gl-react-native/android')

android/app/build.gradle 删掉如下行:

    compile project(':gl-react-native')

然后,就可以 happy 的运行起来了。

相关文章

网友评论

      本文标题:React Native搭建

      本文链接:https://www.haomeiwen.com/subject/ybueeftx.html