React-Native 组件练习-购物app侧滑菜单

参照官方例子练习组件的使用,练习View Image Text 还有Android平台的DrawerLayoutAndroid
效果图:

React-Native 中的 width,height的 100%

在React-Native 中没有百分比这样的宽高,但是有替代的,具体见 issue
flex:1 相当于 height:100%
alignSelf:'stretch' 相当于 width:100%

React-Native 的style

• 直接写在View中

<Text style={{fontFamily: 'notoserif',fontStyle: 'italic',fontWeight: 'bold'}}> NotoSerif Bold Italic </Text>

• 使用 StyleSheet.createClass 创建

var styles = StyleSheet.create({
  base: {
    width: 38,height: 38,},background: {
    backgroundColor: '#222222',active: {
    borderWidth: 2,borderColor: '#00ff00',});

• 以上两种混合

<Text style={[styles.remainder, {color: '#a1a1a1'}]}>
simple text
</Text>

Flex

React-Native中的布局

DrawerLayoutAndroid侧滑菜单

DrawerLayoutAndroid 只在android中,它的 renderNavigationView 代表侧滑菜单内容,子View代表主界面布局
通过ref={(drawer) => { this.drawer = drawer; }} 获取drawer对象
打开: openDrawer()
关闭: closeDrawer()

<DrawerLayoutAndroid  drawerWidth={300} drawerPosition={DrawerLayoutAndroid.positions.Left} ref={(drawer) => { this.drawer = drawer; }}
  renderNavigationView={() => navigationView}>
  <View></View>
</DrawerLayoutAndroid>

按钮的点击效果

• TouchableHighlight
• TouchableNativeFeedback
• TouchableOpacity
• TouchableWithoutFeedback

根据需要的效果选择

点击函数的触发

定义函数

openDrawer: function () {
    this.drawer.openDrawer();
},

设置点击事件

onPress={this.openDrawer}

完整代码

/** * hanks * https://github.com/hanks-zyh */ 'use strict'; var React = require('react-native'); var { AppRegistry,StyleSheet,Text,View,Image,DrawerLayoutAndroid,ProgressBarandroid,ScrollView,ListView,TouchableOpacity,} = React; var AwesomeProject = React.createClass({ openDrawer: function () { this.drawer.openDrawer(); },getinitialState:function(){ var ds = new ListView.DataSource( {rowHasChanged: (r1,r2) => r1 !== r2} ); return { dataSource : ds.cloneWithRows(['CLOTHES','PACKAGES','SHOES',]),} },render: function() { var navigationView = ( <View style={{flex: 1,backgroundColor: '#fff'}}> <Image source= {{ uri: 'http://img.hb.aicdn.com/735afbfa2f6fee24d1a10e1a22b23c63f707ea82281c3-ajdFRe_fw658' }} style={{ height:200 }} /> <ListView  dataSource={this.state.dataSource} renderRow={ (rowData) => <View style={{ height: 56,flexDirection : 'row',alignItems:'center',paddingLeft: 20,}}> <Image source = { require('./img/list4.png') } style={{ height:10,width:10,margin:8 }}/> <Text style={ styles.listItem }>{rowData}</Text> </View> } /> </View> ); return ( <DrawerLayoutAndroid  drawerWidth={300} drawerPosition={DrawerLayoutAndroid.positions.Left} ref={(drawer) => { this.drawer = drawer; }} renderNavigationView={() => navigationView} > <ScrollView contentContainerStyle={styles.contentContainer}> <View> <View style = {{ backgroundColor: '#f4ec34',height:54,flexDirection:'row',justifyContent:'space-between',paddingRight:20,}}> <TouchableOpacity onPress={this.openDrawer}> <Image source={require('./img/list4.png')} style={{ width: 20,height: 20}} /> </TouchableOpacity> <Text style={{ fontSize:18,color:'#484848' }}>SHOP</Text> <Image source={require('./img/search.png')} style={{ width: 20,height: 20}} /> </View> <Image source= {{ uri: 'http://img.hb.aicdn.com/cbf3ebcae08ef62ef02dd61aa2407414dc64e794150313-KRUD1s_fw658' }} style={{ height: 220,margin: 20}} /> <Text style={{ fontSize:16,color:'#484848',alignSelf:'center' }}>HOT PRODUCTS</Text> <View style={ styles.photoRow }> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1YQAPKVXXXXa9XFXXwu0bFXXX.png_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName }>TEL ORGES</Text> <Text style={styles.photoPrice }>$99</Text> </View> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1DteFKVXXXXXQapXXSutbFXXX.jpg_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName}>ARFL JUYHS</Text> <Text style={styles.photoPrice }>$34.2</Text> </View> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1dQGTKVXXXXaaXVXXSutbFXXX.jpg_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName}>TKLL ORGES</Text> <Text style={styles.photoPrice }>$182</Text> </View> </View> <Text style={{ fontSize:16,alignSelf:'center',marginTop:20 }}>NEW COLLECTIONS</Text> <View style={ styles.photoRow }> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1rzGNKVXXXXbGXVXXSutbFXXX.jpg_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName}>TEL ORGES</Text> <Text style={styles.photoPrice }>$99</Text> </View> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1rzGNKVXXXXbGXVXXSutbFXXX.jpg_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName}>ARFL JUYHS</Text> <Text style={styles.photoPrice }>$34.2</Text> </View> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1uBUxKVXXXXcGXpXXSutbFXXX.jpg_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName}>TKLL ORGES</Text> <Text style={styles.photoPrice }>$182</Text> </View> </View> <Text style={{ fontSize:16,marginTop:20 }}>MOST POP</Text> <View style={ styles.photoRow }> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1Rqa3KVXXXXb6XpXXSutbFXXX.jpg_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName}>TEL ORGES</Text> <Text style={styles.photoPrice }>$99</Text> </View> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1Rqa3KVXXXXb6XpXXSutbFXXX.jpg_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName}>ARFL JUYHS</Text> <Text style={styles.photoPrice }>$34.2</Text> </View> <View> <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1lMksKVXXXXa7XpXXSutbFXXX.jpg_270x270Q90.jpg' }} style={ styles.photoItem } /> <Text style={styles.photoName}>TKLL ORGES</Text> <Text style={styles.photoPrice }>$182</Text> </View> </View> </View> </ScrollView> </DrawerLayoutAndroid> ); } }); var styles = StyleSheet.create({ contentContainer: { },listItem:{ },photoRow:{ flexDirection:'row',justifyContent: 'space-between',paddingLeft: 20,paddingRight: 20,marginTop:10,photoItem:{ height: 120,width:90,alignItems: 'stretch',alignSelf:'center' },photoName:{ fontSize:14,color:'#f39d7f',alignSelf:'center',photoPrice:{ fontSize:12,color:'#484848',}); AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

文章出处：http://hanks.xyz