RN问题汇总

生命周期

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

react-native init AwesomeProject
cd AwesomeProject
react-native run-android
npm uninstall react-native
npm install --save [email protected]
react-native run-android
npm install --save babel-core@latest babel-loader@latest
npm uninstall --save babel-preset-react-native
npm install --save [email protected]
react-native run-android

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

npm uninstall react-native
npm install --save [email protected]
npm install --save babel-core@latest babel-loader@latest
npm uninstall --save babel-preset-react-native
npm install --save [email protected]
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直接包裹布局，来添加点击事件。

this._onPressButton()}>
    
        酒店

其中，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，如下图所示。


       this._onPressButton()} 
                    style={[styles.flex,styles.center, styles.lineCenter]}>
            
                 海外酒店                                                   
            
        
       
           特惠酒店

5.居中问题

export class Qualification extends Component {
  render(){
    return (
      
        {Alert.alert("111111")}} style = {styles.button}>
          Button
        
      
    )
  }
}

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需要注意事项

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

render() {
    const test = (
      我是测试的
    );
    return (
      
        {test}
      
    );
  }

7.alignItems 和alignContent的区别

align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。(单行)

align-content属性只适用于多行的flex容器，在单行中设置没有效果。（多行）

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

为多行容器时，

使用align-items时效果：

使用align-content效果：