react-native

常用第三方库

• 调用摄像头：react-native-camera
  官网文档：https://react-native-community.github.io/react-native-camera/

• 颜色渐变：react-native-linear-gradient

1. 安装依赖：npm install react-native-linear-gradient --save
2. 或者需要链接到依赖库：react-native link react-native-linear-gradient
3. start属性是渐变开始的地方，end属性是渐变结束的地方；
   比如：start={{x: 0, y: 0}} end={{x: 1, y: 0}} 就是水平从左到右；start={{x: 0, y: 0}} end={{x: 0, y: 1}} 就是垂直从上到下；start={{x: 0, y: 0}} end={{x: 1, y: 1}}就是斜角度渐变；默认是垂直；
   colors属性为数组，渐变颜色按序排列；
   locations属性指定每种渐变色到范围，locations={[0,0.5,0.6]}代表：从0～50%是绿色，从50%～60%是黄色，从60%～100%是红色

import LinearGradient from 'react-native-linear-gradient';
<LinearGradient 
  start={{x: 0, y: 0}} 
  end={{x: 1, y: 0}} 
  colors={['green', 'yellow', 'red']} 
  locations={[0,0.5,0.6]}
  style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    渐变色按钮
  </Text>
</LinearGradient>
var styles = StyleSheet.create({
linearGradient: {
  flex: 1,
  paddingLeft: 15,
  paddingRight: 15,
  borderRadius: 5
},
buttonText: {
  fontSize: 18,
  textAlign: 'center',
  margin: 10,
  color: '#ffffff',
},
});

• 图像选择器：react-native-image-picker
• 单选框组件：react-native-radio-buttons
• 选择器：react-native-picker
• 路由:reactnavigation
  在react-navigation中，为页面添加了可用的生命周期
  onWillBlur：页面将要失去焦点
  onDidBlur：页面已经失去焦点
  onWillFocus：页面将要获得焦点
  onDidFocus：页面已经获得焦点
  react-navigation提供了两种方式获取这个生命周期、

  手动监听

componentDidMount() {
    // 通过addListener开启监听，可以使用上面的四个属性
    this._didBlurSubscription = this.props.navigation.addListener(
        'didBlur',
        payload => {
            console.debug('didBlur', payload);
        }
    );
}
componentWillUnmount() {
    // 在页面消失的时候，取消监听
    this._didBlurSubscription && this._didBlurSubscription.remove();
}

通过组件方法监听

<NavigationEvents 
    onWillFocus={onWillFocus}
    onDidFocus={onDidFocus}
    onWillBlur={onWillBlur}
    onDidBlur={onDidBlur}   
/>

知识点

• StatusBar.currentHeight
  React Native 在 Android 平台为 StatusBar 组件提供了一个静态常量 currentHeight，通过读取这个常量来得到 Android 手机状态栏的高度