美文网首页
react-native组件学习

react-native组件学习

作者: Vijay_ | 来源:发表于2018-04-27 01:33 被阅读22次

    react-native组件爬坑

    • activityIndicator

      • animating属性如果一开始为false的话 则不会渲染该组件 后面再修改属性也没用
    • button或touch组件点击时有时会报错RESPONDER_INACTIVE_PRESS_IN....

      • 仅在远程调试时发生
    • FlatList 纯组件

      • 必要参数:
        • data 循环数据
        • extraData 额外数据(为了让列表更新的匹配数据) 因为该组件是纯组件 所以只有它的props发生改变才会更新,所以如果想让该列表更新 一定要把交互的数据(state)放如这个属性中
        • keyExtractor 每列的key生成器
        • renderItem 渲染每列 可以接受一个对象 item为data数组中的每项,index为角标
      • 为了优化性能建议使renderItem的组件也成为纯组件
      • 可选参数:
        • ItemSeparatorComponent 分割线组件要用外边距撑开才能看得见
        • ListEmptyComponent 无法使用
        • ListFooterComponent 尾部
        • ListHeaderComponent 头部
        • horizontal 设置是否为水平布局
        • initialNumToRender 优先渲染的个数
        • onEndReached 滚动到接近底部时调用
        • onEndReachedThreshold 决定当距离内容最底部还有多远时触发onEndReached
          回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
        • onRefresh 当刷新时调用,设置该参数即会显示一个标准的refreshConrtol
        • refreshing bool 控制是否显示刷新控件
      • 该组件是继承自scrollView的 所以scrollView的属性它都可以使用,例如:refreshControl....
      • overScrollMode={"always"}该属性可以控制scrollView等滚动视图内容不超过容器时也可以上拉下拉
    • Modal(RN库)组件默认是占据整个屏幕的 不能修改样式 所以内容要放在子组件中

    • react-native-router-flux

      • 组件结构为:
        • Router
          • Lightbox
          • Stack
            • Tabs
            • Scene || Drawer-Scene
          • Modal
      const Route = _ => {
          return (<Router sceneStyle={Styles.routerStyle}>
              <Lightbox>
                  <Stack key={"Root"} navigationBarStyle={Styles.navigationBar} titleStyle={{color: Constant.titleTextColor}}>
                      <Tabs key={"Tab"} showLabel={false} tabBarPosition={"bottom"} lazy animationEnabled={false}
                            swipeEnabled={false}>
                          <Scene icon={TabIcon} tabIconName={"shouye"} hideNavBar key={"Mine"} title={"我的"} component={Mine}/>
                          <Scene icon={TabIcon} tabIconName={"shouye"} hideNavBar key={"Index"} title={"首页"}
                                 component={Index}/>
                      </Tabs>
                      <Drawer key={"Drawer"} drawerPosition={'right'}
                              hideNavBar
                              drawerWidth={100}
                              drawerIcon={<AppIcon name={"shouye"} size={20} color={"purple"}/>}
                               contentComponent={Arawer}>
                          <Scene key={"Mine_Help"} component={Mine_Help} title={"帮助中心"}/>
                      </Drawer>
                  </Stack>
                  <Modal key={"Need"} component={LoadingModal}/>
      
              </Lightbox>
      
          </Router>)
      };
      
    • RefreshControl组件可以在内部放置子组件(必须需要设置尺寸),在安卓上可以直接使用(显示)RefreshControl控件,ios上必须放在scrollview等列表控件中作为刷新控件

    • flex布局中不使用 justifyContent时默认组件的宽度是百分百,在RN中默认布局是column

    • 在android中View的高度默认是可以被子组件撑开的 但是如果父组件设置了flex:xxx,则限定了该容器的高度为其flex值,子组件不再能撑开,宽度与高度的规则一样

      • 注意:父组件设置的width,height样式是可以被撑开的,仅android中的flex不能被撑开
      //举个例子:
      <View style={[styles.flexDirectionRowNotFlex]}> //未限制高度,仅把主轴翻转
          <View style={[styles.flex,{backgroundColor:"#ccc"}]}> //由于主轴翻转,此处flex值对应的是宽度,即此处限定了宽度为父组件的flex:1。  注意:此处内容内的主轴是column
              <View style={[styles.flexDirectionRowNotFlex]}> //为限定高度
                  <View style={{height:200,width:100,backgroundColor:"#000"}}/> //设置高度,由于父组件都没限制flex高度,则可以把所有父组件的高度撑开
            </View>
        </View>
      </View>
      

    相关文章

      网友评论

          本文标题:react-native组件学习

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