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'}
}