美文网首页
RN问题汇总

RN问题汇总

作者: lkuo | 来源:发表于2018-09-27 09:49 被阅读35次
生命周期

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-itemsalign-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

为多行容器时,

  • 使用align-items时效果:


  • 使用align-content效果:


8.

相关文章

  • RN问题汇总

    1.Win10上配置环境出现,module accessibilityinfo does not... 每次新建项...

  • RN日常问题汇总

    1.CFBundleIdentifier", Does Not ExistCommand failed: /usr...

  • React Native相关资源

    RN资源汇总 RN 常用控件汇总:https://www.jianshu.com/p/16fce3717fdc R...

  • React Native(一)资源整理-持续更新

    RN资源网站 React Native中文网 RN 第三方控件 英文汇总 RN推荐文章 编程风格 ReactJS原...

  • RN报错汇总

    RN层面 1. react-native init #projName# 报错: 镜像不对,检查镜像是否为tao...

  • RN报错汇总

    一、react-native init #projName# 报错: 镜像不对,检查镜像是否为taobao的镜像...

  • ROC-AUC 曲线以及PRC曲线

    目录:机器学习常见面试问题汇总问题汇总(1):逻辑回归问题汇总(2):支持向量机问题汇总(3):树模型问题汇总(4...

  • 起点RN Demo安卓迁移问题汇总

    1. 三方库(调用原生)的使用 这里的三方库特指需要调用原生的库,目前项目里用到了react-native-sha...

  • React Native(RN)样式兼容问题汇总

    由于Android机在RN的开发测试中的方便性,会先利用Android机进行RN的静态界面样式开发,但这些静态界面...

  • RN开源项目汇总

    https://github.com/liuhongjun719/react-native-DaidaiHelpe...

网友评论

      本文标题:RN问题汇总

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