RN问题汇总

生命周期

1.Win10上配置环境出现，module accessibilityinfo does not...

react-native init AwesomeProject
cd AwesomeProject
react-native run-android
npm uninstall react-native
npm install --save react-native@0.55.4
react-native run-android
npm install --save babel-core@latest babel-loader@latest
npm uninstall --save babel-preset-react-native
npm install --save babel-preset-react-native@4.0.0
react-native run-android

每次新建项目，直接以下6步完成！！！

npm uninstall react-native
npm install --save react-native@0.55.4
npm install --save babel-core@latest babel-loader@latest
npm uninstall --save babel-preset-react-native
npm install --save babel-preset-react-native@4.0.0
react-native run-android

问题解决！！！！

参考：https://stackoverflow.com/questions/48756550/unable-to-resolve-module-accessibilityinfo-when-trying-to-create-release-bund

2.

显示内置的扩展-->禁用TypeScript and JavaScript Language Features

4. TouchableOpacity布局问题

• TouchableNativeFeedback直接包裹布局，来添加点击事件。

<TouchableNativeFeedback onPress = {()=>this._onPressButton()}>
    <View style = {[styles.item,styles.center]}>
        <Text style={styles.font}>酒店</Text>
   </View>
</TouchableNativeFeedback>

其中，onPress = {()=>this._onPressButton()}写成这种是一样的。如果错写成onPress = {this._onPressButton()}，你会发现_onPressButton方法自动运行了一次，点击事件失效。

但是长按会报错:

Attempted to transition from state RESPONDER_INACTIVE_PRESS_IN to RESPONDER_ACTIVE_LONG_PRESS_IN, which is not supported. This is most likely due to Touchable.longPressDelayTimeout not being cancelled.

• TouchableOpacity不能直接包裹布局来添加点击事件，如果你这么做了，你会发现你的控件消失了。正确的做法是，用TouchableOpacity替换那一层的View，如下图所示。

<View style = {[styles.item,styles.lineLeftRight]}>
       <TouchableOpacity  onPress = {()=>this._onPressButton()} 
                    style={[styles.flex,styles.center, styles.lineCenter]}>
            <View>
                 <Text style={styles.font}>海外酒店</Text>                                                   
            </View>
       </TouchableOpacity> 
       <View style={[styles.flex, styles.center]}>
           <Text style={styles.font}>特惠酒店</Text>
       </View>
</View>

5.居中问题

export class Qualification extends Component {
  render(){
    return (
      <View style={styles.flex}>
        <TouchableOpacity onPress={()=>{Alert.alert("111111")}} style = {styles.button}>
          <Text style={styles.font}>Button</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  flex:{
    flex:1,
    backgroundColor:'#0f0',
    justifyContent:'center',
    // alignItems:'center',
  },
  button:{
    flexDirection:'row',
    height:80,
    backgroundColor:'#f00',
    justifyContent:'center',
    alignItems:'center',
  },
  font:{
    color:"#fff",
  },
});

如果alignItems:'center'不注释掉，会影响内部控件无法填充满屏幕！！！
此外，Text的居中，需要依靠父控件的设置。

6.JSX需要注意事项

1. 例如<div>text</div>，此时text指的是文本，如果你向text指向的是变量，需要在该变量左右添加{}!!!!
2. 在JSX语法中，不要使用if else，使用三目运算符代替！！！
3. StyleSheet中，以逗号,结尾，并且RN属于JS对象，key的名字不能出现“-”，必须使用驼峰命名法，如果value是字符串，必须加“”，value如果是数字，RN中不需要加单位！！
4. JSX语法中，标签必须使用()包裹，此处一定要注意！！！！例如

render() {
    const test = (
      <Text>我是测试的</Text>
    );
    return (
      <View style={styles.container}>
        {test}
      </View>
    );
  }

7.alignItems 和alignContent的区别

• align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。(单行)
• align-content属性只适用于多行的flex容器，在单行中设置没有效果。（多行）

align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

为多行容器时，

• 使用align-items时效果：

  
  

• 使用align-content效果：

  
  

8.