文章目录
  1. 1. Defined
  2. 2. 基本的file structure
  3. 3. Main()
  4. 4. 题外话

Defined

React Native 坑有点多, 遇到问题就放这里面了
主要是关于Android方面的

基本的file structure

https://github.com/sunnylqm/react-native-project-structure-guide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
beginner
├── android
│   ├── app
│   │   ├── build # output files(auto generate)
│   │   │   └── *
│   │   └── src
│   │   └── main
| | ├── java
| | │   └── com-xxx # java files
| | | └── *.java
| | ├── res # resources
| | └── AndroidManifest.xml # android settings
│   ├── build
│   │   └── intermediates #中间件?(暂时不懂)
│   │   ├── dex-cache
│   │   └── lint-cache
│   ├── gradle # gradlew integration tool
│   │   └── wrapper
│   └── keystores
├── ios # not for ios, ignore
├── app
│   ├── components
│   ├── image
│   ├── page
│   ├── style
│   └── utility
├── node_modules # relies

Main()

  1. Error: “Could not get BatchedBridge, make sure your bundle is packaged properly”
    @tbo

  2. Beginner for react-native;
    https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

    AndroidManifest.xml:

    APP/node_modules/react-native/ReactAndroid/src/main

    Add native code #Section: the directory is

    APP/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/

    APP name: HelloWorld Line 18 in MyReactActivity.java

  3. In MyReactActivity.java
    useAlt + Enter to add all missing imports in android-studio

  4. In AndroidManifest.xml(path on the top) add:

    1
    2
    3
    4
    5
    <activity
    android:name=".MyReactActivity"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">
    </activity>
  5. Maybe need react-native upgrade at first time

    https://github.com/facebook/react-native/issues/9312

  6. Error: react-native application has not been registered
    link:stackoverflow

    react-native init
    AppRegistry.registerComponent(‘‘, () => HelloWorld);

    APPNAME should be the same.

  7. When connecting real device, create a new terminal with this folder.Typeadb reverse tcp:8081 tcp:8081

  8. RUN IN ANDROID(via usb):

    a. react-native upgrade
    b. react-native run-android
    c. npm start(node node_modules/react-native/local-cli/cli.js start)

  9. Change package name for Android in React Native Ask Question

    android/app/src/main/java/com/PROJECT_NAME/MainActivity.java: package MY.APP.ID;
    android/app/src/main/java/com/PROJECT_NAME/MainApplication.java: package MY.APP.ID;
    android/app/src/main/AndroidManifest.xml: package=”MY.APP.ID”
    android/app/build.gradle: applicationId “MY.APP.ID”
    Gradle’ cleaning in the end: ./android/gradlew clean

    app_name: android/app/src/main/res/strings.xml
    package_name: android/app/build.gradle -> applicationID
    app_img: android/app/src/main/res/mipmap-xxx
    plz react-native upgrade after changing

  10. when developing, we need to npm start again when every node_modle update.

  11. the development server returned response error code :404


  12. in this Component1.js, the props has props1 and proprs2

  13. bug(fixed with a node module??):
    Error while updating property ‘fontWeight’ in shadow node of typ:RCTText
    delete: details here:
    What I found is that all I would do is just ().toString()

  14. If the app crashed, react-native run-androidis needed again.

  15. _this2.setState is not a function
    典型的this指向问题, 两种解决方案

    origin
    onPress={this.myFunction}

    1. onPress={() => this.myFunction()}
    2. onPress={(this.myFunction).bind(this)}

    OR: in constructor this.onPress = this.onPress.bind(this)

  16. Set Global text color
    Seems not working.

  17. button to toggle show/hide

    1
    2
    3
    4
    5
    6
    7
    {
    this.state.showTheThing &&
    <TextInput/>
    }
    // Then just do:
    this.setState({showTheThing: true}) // to show it
    this.setState({showTheThing: false}) // to hide it
  18. TranformError your/path/xx.jpg: Unexpected character’?’(1:0)
    Just reload the package with npm start

  19. react native each child in an array or iterator should have a unique key
    stackoverflow As it said, add the key val for each array component.e.g. <Picker.item key={xxx}/>

  20. Image set inline

    stackoverflow

    1
    2
    3
    4
    5
    6
    //container style wrapper for scrollview
    inlineRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    },
  21. ReactNative the meaning of { flex: 1 }

  22. 100%width

    1
    2
    3
    4
    5
    line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
    },

    OR

    1
    2
    3
    4
    5
    import {
    Dimensions
    } from 'react';
    var width = Dimensions.get('window').width; //full width
    var height = Dimensions.get('window').height; //full height
  23. Customizable button
    TouchableHighlight

  24. java.lang.OutOfMemoryError: GC overhead limit exceeded
    android/app/build.gradle
    add this

    1
    2
    3
    4
    5
    6
    7
    android {
    ...
    dexOptions {
    incremental true
    javaMaxHeapSize "4g"
    }
    }
  25. java.lang.OutOfMemoryError: Java heap space
    android/app/src/main/AndroidManifest.xml

    1
    2
    <application
    android:largeHeap="true"
  26. command Release apk ???
    official

    1
    react-native run-android --variant=release
  27. TouchableNativeFeedback, TouchableHighlight and TouchableOpacity

  28. Error “code”:”ENOSPC”,”errno”:”ENOSPC”

    1
    echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
  29. React.Children.only expected to receive a single React element child

    ‘s children should be the only one which means multi children should be wrapped by <View>

  30. Footer fixed

  31. app刚刚开启时候的启动图配置

  32. Icon Change

    1
    2
    3
    <applicatio>
    android:icon="@drawable/YourIconName"
    </application>
  33. 启动页image配置

  34. pidXXXXX.hprof
    The pidXXXXX.hprof file is a logfile that contains the entire memory dump. It is generated by Java when the system fails with an Out Of Memory error.

题外话

刚刚发现了markdown保证顺序输出的方法了, space*n就能保证处于第几级范围.
在行尾加上space*2能作为软换行(soft return)

文章目录
  1. 1. Defined
  2. 2. 基本的file structure
  3. 3. Main()
  4. 4. 题外话