RN开发技巧

案例一 FlatList 水平滚动

需求: 手机屏幕有限，一行列表信息内容过多,因此需要水平滚动。

 render() {
    return (
      <ScrollView
        showsHorizontalScrollIndicator={false} //不显示水平滚动条
        alwaysBounceHorizontal={true}
        horizontal={true} 
      >
        <FlatList
        	//省略 ...
          showsHorizontalScrollIndicator={false} //取消垂直滚动条
        />
      </ScrollView>
    );
  }

回到目录

案例二 隐藏Navigation 头部阴影

const AppNavigation = StackNavigator(
  {
    'The First Screen!': { screen: FirstScreen },
  },
  {
    navigationOptions: {
      header: {
        style: {
          elevation: 0, // remove shadow on Android
          shadowOpacity: 0, // remove shadow on iOS
        },
      },
    },
  },
);

回到目录

案例三 打开外链接

场景: 对打开的连接进行效验，符合要求则打开，否则提示用户连接不合法
RN 官方案例地址

Linking.canOpenURL(url)
  .then((supported) => {
    if (!supported) {
      console.log("Can't handle url: " + url);
    } else {
      return Linking.openURL(url);
    }
  })
  .catch((err) => console.error('An error occurred', err));

回到目录

案例四 TextInput 密码框

 <InputText
        textValue="交易密码"
        containerStyle={{ width: '100%', marginTop: -10, color: '#666', fontSize: 17 }}
        value={Password}
        secureTextEntry={true} //隐藏密码
        textContentType="password" //内容
        keyboardType="number-pad" //键盘类型
        onChangeText={v => this.handlePwd(v)}
          />

回到目录

案例五 内容一直处于滚动区域内

场景:当使用ScrollView滚动时，内容一致处于滚动可视区域内.此处可以考虑使用RN官网中的Animate 官网动画地址

1. 初始化数据

 state = {
    scrollX: new Animated.Value(0),
  };

2. 简单布局，使用Animate包裹

 <View>
        <Animated.View
          style={[
            styles.block,
            {
              transform: [{
                translateX: this.state.scrollX
              }]
            }
          ]}
        />
        <Animated.ScrollView
          horizontal
          style={{ height: 100, marginTop: 16 }}
          scrollEventThrottle={16}
          //使用Onscoll 当滚动时，获取值然后赋值为 this.state.scrollX
          // 此处也可以用一个变量接受。
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { x: this.state.scrollX } } }],
            { useNativeDriver: true },
          )}>
          <View
            style={{
              width: 600,
              backgroundColor: '#eee',
              justifyContent: 'center',
            }}>
            <Animated.Text style={[
              styles.block,
              {
                transform: [{
                  translateX: this.state.scrollX
                }]
              }
            ]}>Scroll me!</Animated.Text>
          </View>
        </Animated.ScrollView>
      </View>

3. 样式书写

const styles = StyleSheet.create({
  block: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  }
})