这篇博客是综合性质的, 东西较多
- drawerNavigation的用法12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879const MyDrawerNavigator = createDrawerNavigator({Home: {screen: MyHomeScreen,},Notifications: {screen: MyNotificationsScreen,}}, {drawerWidth:200,drawerBackgroundColor: 'pink',contentOptions: {activeTintColor: 'yellowgreen',activeBackgroundColor: 'purple'},// 使用自定义的drawerContentcontentComponent: customDrawerComponent,defaultNavigationOptions: ({navigation}) => {const { routeName } = navigation.state;return {// 在这里定义drawerLabel 其实这里也可以定义drawerIcondrawerLabel: routeName == 'Home' ? 'qqqqq':'wwwww'}}});// DrawerItems的使用const customDrawerComponent = (props) => (<View style={{width:200, backgroundColor: 'orange'}}><Imagesource={require('./img/qq2.jpg')}style={[styles.icons]}/><DrawerItems {...props}/></View>)class MyHomeScreen extends Component {static navigationOptions = {//drawerLabel: 'Home',drawerIcon: ({ tintColor }) => (<Imagesource={require('./img/qq1.jpg')}style={[styles.icon]}/>)}render() {return (<View><ButtononPress={() => this.props.navigation.navigate('Notifications')}title="Go to notifications"/></View>);}}class MyNotificationsScreen extends React.Component {static navigationOptions = {//drawerLabel: 'Notifications',drawerIcon: ({ tintColor }) => (<Imagesource={require('./img/qq1.jpg')}style={[styles.icon]}/>),};render() {return (<ButtononPress={() => this.props.navigation.goBack()}title="Go back home"/>);}}
这就是drawerNavigation的基本用法
- 最近发现了一个不错的用于redux state修改的npm immutability-helper123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657import update from 'immutability-helper';function peopleReducer (state = initialState, action) {case 'changePeople':return update(state, {people: {$set: 'aaaaa'}})}const state1 = ['x'];const state2 = update(state1, {$push: ['y']}); // ['x', 'y']const newData = update(myData, {x: {y: {z: {$set: 7}}},a: {b: {$push: [9]}}});const collection = [1, 2, {a: [12, 17, 15]}];const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});const obj = {a: 5, b: 3};const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});// => {a: 5, b: 6}// This is equivalent, but gets verbose for deeply nested collections:const newObj2 = update(obj, {b: {$set: obj.b * 2}});var state = {}var desiredState = {foo: [{bar: ['x', 'y', 'z']},],};const state2 = update(state, {foo: foo =>update(foo || [], {0: fooZero =>update(fooZero || {}, {bar: bar => update(bar || [], { $push: ["x", "y", "z"] })})})});// 自定义命令import update, { extend } from 'immutability-helper';// tax original 指的是什么extend('$addtax', function(tax, original) {return original + (tax * original);});const state = { price: 123 };const withTax = update(state, {price: {$addtax: 0.8},});assert(JSON.stringify(withTax) === JSON.stringify({ price: 221.4 }));
这用法是不是很简单, 上面是提供几个常用的例子
3.下面来讲讲matrix3d
上述代码会把matrix3d的内容打印出来