react-native常用基础布局总结

| |

多个style

1
style={[styles.style1, styles.style2]}

组件

组件之间的属性/事件传递

组件使用

api
常用组件

  • FlatList 列表

    • 自带滚动 scrollView，设置上下间距无效，需要设置到子元素的view
    • contentContainerStyle 样式应用到内层容器
    • onRefresh 需要 与 refreshing 共用
    • onScroll
      • event参数
      • event.nativeEvent.contentOffsetY 滚动垂直距离
      • event.nativeEvent.layoutMeasurement.height 滚动内容高度
    • numColumns={3} 三列、横行排列
    • horizonal={true} 始终横向排列，超出范围横向滚动
    1
    2
    3
    4
    5
    6
    7
    <FlatList
            data={this.state.userList}
            keyExtractor={this.keyExtractor}
            renderItem={this.renderItem}
            style={styles.container}
            numColumns={3}
          />

尺寸

ppi
像素密度 ppi / 160
dp 与 px 的关系

1
2
3
4
5
6
7
8
9
dp = px / (ppi / 160)
px = dp * ppi / 160

dp = px / PixelRatio.get()

// 设计稿
// 4.7英寸，分辨率1136*640，那么像素密度是：√（1136^2+640^2）=1303.87
// 1303.87/4.7≈277ppi
// 像素密度 = 277 / 160 = 1.73

[app 设计详细]http://www.25xt.com/appdesign/8862.html

手势、点击穿透

pointerEvent 控制组件与子组件之间的触摸关系

图片

  • 网络图片需要预设一个固定宽高，否则大小为0

  • gif图支持
    android/app/build_gradle

    1
    2
    3
    dependencies
    // For animated GIF support
    compile 'com.facebook.fresco:animated-gif:0.13.0'

  • 圆角图片溢出（有锯齿）
    overflow: ‘hidden’安卓中无效，子级元素会溢出
    防止圆角图片溢出：添加父级View作溢出处理（父级为设置了borderRadius的View）

zIndex

opacity属性会影响溢出显示的元素的层次顺序，因此可以用在子元素上
zIndex不一定有效，最好是通过元素顺序来控制层次

滚动事件

  • onScrollBeginDrag
  • onScrollEndDrag
  • onMomentumScrollBegin
  • onMomentumScrollEnd
  • onScroll

滚动导航置顶

  • 滚动列表的高度需要固定（置顶前高度=屏幕高度），否则会因为导航置顶，滚动内容高度变化造成闪烁
  • 动画，interpolate 插值

点击涟漪反馈

  • 支持android api 21+
  • MRN 基于React Native的Material Design风格的组件库 支持android api 16+ 
1
2
3
4
<TouchableNativeFeedback
background={ (Platform.OS === 'android' && Platform.Version >= 21) ? TouchableNativeFeedback.Ripple('#ccc', false) : null } // 满足安卓平台及api 21+
onPressOut={this.onPressEvent.bind(this, item)} delayPressOut={100}> // 点击先执行涟漪动画，再执行press事件，防止事件响应过不显示涟漪动画
</TouchableNativeFeedback>

动画

教程
loop动画在组件销毁前最好先stop

字体过长处理

ellipsizeMode=’tail’ numberOfLines={1}

用ts编写rn

教程

参考：
布局篇详解
样式使用与 flexbox