React Native 技巧集锦

1、利用View绘制上、下三角

<View style={
{  width:0, 
   height:0, 
   borderTopWidth:12, 
   borderRightWidth:12, borderBottomWidth:0, 
   borderLeftColor:'transparent', 
   borderTopColor:'#656565', 
   borderRightColor:'transparent',                 borderBottomColor:'transparent', 
   marginLeft:70}}>
</View>

2、利用View绘制左、右箭头

backIcon: {
    width: 14,
    height: 14,
    borderColor: '#777',
    borderLeftWidth: 2,
    borderBottomWidth: 2,
    transform: [{rotate: '45deg'}],
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 33.9,
    left: 14.5
  }

3、propTypes类型列举：

propTypes: {
// 可以声明 prop 为指定的 JS 基本类型。
optionalArray: React.PropTypes.array, 
optionalBool: React.PropTypes.bool, 
optionalFunc: React.PropTypes.func, 
optionalNumber: React.PropTypes.number, 
optionalObject: React.PropTypes.object, 
optionalString: React.PropTypes.string, 
optionalNode: React.PropTypes.node, 
// React 元素 
optionalElement: React.PropTypes.element, 
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。 
optionalMessage: React.PropTypes.instanceOf(Message), 
// 用 enum 来限制 prop 只接受指定的值。 
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), 
// 指定的多个对象类型中的一个 
optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), 
// 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), 
// 指定类型的属性构成的对象 
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), 
// 特定形状参数的对象 
optionalObjectWithShape: React.PropTypes.shape({ color:    React.PropTypes.string, 
  fontSize: React.PropTypes.number }), // 以后任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 
requiredAny: React.PropTypes.any.isRequired,
}

4、查找节点元素

// 处理偏移问题
  scrollViewTo(e) {
    let target = e.nativeEvent.target;
    let scrollLength;
      switch (target){
         case ReactNative.findNodeHandle(this.refs.email):
           scrollLength = this.sw < 340 ? 60 : 0;
           break
         default:
         break;
     }     
  }         

5、去除react-navigation中navigation和tabBarview的黑色线

// navigation 
const StackMainNavigator = StackNavigator({
  }, {
    navigationOptions: {
        headerBackTitle: null,
        headerTintColor: '#080808',
        headerStyle: {backgroundColor: 'white', borderBottomColor: 'transparent'},
    },
    headerMode: 'screen'
});


// tabbar,style添加‘borderTopColor‘
const TabHomeNavigator = TabNavigator({
  HomePage: {screen: HomePageScreen},
  MinePage: {screen: MinePageScreen},
}, {
    tabBarOptions: {
        inactiveTintColor: '#888',
        activeTintColor: '#ffe505',
        style: {backgroundColor: 'white', height: 48, borderTopColor: 'transparent'},
        indicatorStyle: {height: 0},
        labelStyle: {margin: 0, fontSize: 11, marginTop: 3, bottom: 6},
        tabStyle: {paddingBottom: 0, borderTopWidth: 0, borderTopColor: '#efefef'},
        showIcon: true
    },
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazyLoad: true,
    backBehavior: 'none'
});

效果图：
// navigation

// tabbar

6、这是Android上title剧中显示

navigationOptions: {
        headerBackTitle: null,
        headerTintColor: '#080808',
        headerTitleStyle:{flex: 1, textAlign: 'center'},
        headerStyle: {backgroundColor: 'white', borderBottomColor: 'transparent'}
    }