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

落日映苍穹つ 2022-08-18 15:19 231阅读 0赞

参照官方例子练习组件的使用,练习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中的布局 ][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][http_hanks.xyz]

[React-Native]: http://file.bmob.cn/M02/11/DF/oYYBAFZ5LF6AVgO5AIY4EJ1JHfk120.gif
[issue]: https://github.com/facebook/css-layout/issues/57#ref-issue-86696744
[React-Native_]: http://hanks.xyz/2015/12/21/react-flexbox/
[TouchableHighlight]: https://facebook.github.io/react-native/docs/touchablehighlight.html#content
[TouchableNativeFeedback]: https://facebook.github.io/react-native/docs/touchablenativefeedback.html#content
[TouchableOpacity]: https://facebook.github.io/react-native/docs/touchableopacity.html#content
[TouchableWithoutFeedback]: https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#content
[http_hanks.xyz]: http://hanks.xyz