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

来源：互联网发布：淘宝美工摄影速成编辑：程序博客网时间：2024/05/16 05:07

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

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',          alignItems:'center',          paddingLeft: 20,          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,  color:'#484848',  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,  color:'#484848',  alignSelf:'center' , 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', alignSelf:'center' },});AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

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

1 0