从零开始学习React Native，先重布局开始学起

时间 2019-11-16

标签开始学习 react native 布局学起栏目 React 繁體版

原文原文链接

React Native布局学习，模仿携程的首页内容，能够很好的让咱们练习一下flexbox布局，最后完成的效果图以下：

附上Github地址，欢迎star
react

1、布局主要内容以下：

一、搜索栏的布局
二、图片轮播
三、相似九宫格的布局
四、图片、文字混合布局
五、底部布局git

主要使用的控件

StyleSheet
Text
PixelRatio
ScrollView
Image
View
TextInputgithub

记得导出与引用

导出单独的样式npm

module.exports= Search;

在主文件中使用react-native

const Search = require('./search');

2、搜索栏布局实现

class Search extends Component {
  render() {
    return (
      <View style={styles.sub_searchView}>
        <View style={styles.searchBarView}>
          <Image source={require('./imgs/search_icon.png')}
                 style={{height:18,width:18,alignSelf:'center',marginLeft:5} } />
          <TextInput
              autoCapitalize="none"
              autoCorrect={false}
              placeholder="搜索:目的地/景点/酒店/关键字/航班号"
              style={styles.searchBarInput}
              />
          <Image source={require('./imgs/voice_icon.png')}
                 style={{height:18,width:18,alignSelf:'center',marginLeft:0} } />
        </View>
        <View style={styles.messageView}>
          <Image source={require('./imgs/message_icon.png')}
                 style={{height:22,width:22} } />
        </View>
      </View>
    );
  }

具体的样式见源代码。api

3、图片轮播

这里使用了开源的组件react-native-swiper
Github项目地址，里面有具体的使用介绍
记得安装完后，从新启动一下package,否则会报错
下面是安装的代码，具体见Githubapp

$ npm i react-native-swiper --save

<Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={80}
                  activeDot = {<View style={{backgroundColor:'#1EA0DB', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
                  scrollsToTop={true}
              >
            <Image style={[styles.slideView,]} source={{uri:slideImages[0]}}/>
            <Image style={[styles.slideView,]} source={{uri:slideImages[1]}}/>
            <Image style={[styles.slideView,]} source={{uri:slideImages[2]}}/>
            <Image style={[styles.slideView,]} source={{uri:slideImages[3]}}/>
            <Image style={[styles.slideView,]} source={{uri:slideImages[4]}}/>
          </Swiper>

具体的样式见源代码。ide

4、相似九宫格的布局

<View style={[styles.sbu_view, styles.sub_red]}>

            <View style={[styles.item, styles.sub_icon_flex]}>

              <View style={[styles.sub_icon_flex]}>
                <Text style={styles.font}>酒店</Text>
              </View>

              <View style={[styles.sub_flex,styles.sub_icon_flex]}>
                <Image source={{uri:Icons[0]}} style={styles.sub_icon_img}></Image>
              </View>

            </View>

            <View style={[styles.item, styles.lineLeftRight]}>

              <View style={[styles.sub_flex, styles.sub_icon_flex, styles.lineCenter]}>
                <Text style={styles.font}>海外酒店</Text>
              </View>

              <View style={[styles.sub_flex, styles.sub_icon_flex]}>
                <Text style={styles.font}>特惠酒店</Text>
              </View>

            </View>

            <View style={styles.item}>

              <View style={[styles.sub_flex, styles.sub_icon_flex, styles.lineCenter]}>
                <Text style={styles.font}>团购</Text>
              </View>

              <View style={[styles.sub_flex, styles.sub_icon_flex]}>
                <Text style={styles.font}>民宿·客栈</Text>
              </View>

            </View>
          </View>

具体的样式见源代码。布局

5、图片、文字混合布局

<View style={styles.sub_subject_sup_contentView}>

              <View style={styles.sub_supImgView}>
                <Image source={{uri:subject_supImages[0]}} style={styles.sub_subject_sup_img}/>
                <View style={[styles.color_grey]}>
                  <Text style={styles.sub_sup_fontSize}>
                    美食之旅·呼和浩特+希拉穆仁草原+响沙湾+鄂尔多斯...
                  </Text>

                  <View style={styles.sub_sup_priceView}>
                    <Text style={styles.sub_price_fontSize}>
                      ¥2899起
                    </Text>

                    <View style={styles.sub_sup_priceChildView}>
                      <Text style={styles.sub_sup_fontSize}>
                        省¥1100
                      </Text>
                    </View>
                  </View>
                </View>
              </View>


              <View style={styles.sub_supImgView}>

                <View style={[styles.sub_sup_right_top, styles.color_grey, styles.sub_sup_borderBottom]}>
                  <View style={{flex: 2}}>
                    <Text style={[styles.sub_price_fontSize, {marginTop: 10, marginLeft: 5, fontWeight: 'bold',color: '#FA5267'}]}>
                      千款特价
                    </Text>
                    <Text style={{fontSize: 12, marginLeft: 5}}>
                      走过路过不错过
                    </Text>
                  </View>

                  <View style={[styles.sub_flex]}>
                    <Image source={{uri:subject_supImages[1]}} style={styles.sub_sup_right_img}/>
                  </View>
                </View>

                <View style={[styles.sub_sup_right_bottom, styles.color_grey]}>
                  <View style={[styles.sub_flex, styles.sub_sup_borderRight ,{alignItems: 'center',justifyContent: 'center'}]}>
                    <Text style={[styles.sub_price_fontSize, {marginTop: 10, marginLeft: 5, fontWeight: 'bold',color: '#3D98FF'}]}>
                      海外精选
                    </Text>
                    <Text style={{fontSize: 12, marginLeft: 5}}>
                      百元出境游
                    </Text>
                    <Image source={{uri:subject_supImages[2]}} style={styles.sub_sup_rightBottom_img}/>
                  </View>

                  <View style={[styles.sub_flex, {alignItems: 'center',justifyContent: 'center'}]}>
                    <Text style={[styles.sub_price_fontSize, {marginTop: 10, marginLeft: 5, fontWeight: 'bold',color: '#4FC72F'}]}>
                      周边玩乐
                    </Text>
                    <Text style={{fontSize: 12, marginLeft: 5}}>
                      十元度周末
                    </Text>
                    <Image source={{uri:subject_supImages[3]}} style={styles.sub_sup_rightBottom_img}/>
                  </View>
                </View>

              </View>

            </View>
          </View>

具体的样式见源代码。学习

6、底部布局

class Tab extends Component {
  render() {
    return (
      <View style={[styles.sub_tab_flex, styles.sub_tab_topLine]}>
        <View style={styles.sub_tab_icon}>
          <Image source={require('./imgs/tab_item_01.png')} style={styles.sub_tab_image}/>
          <Text style={[{color: '#3D98FF'}, styles.sub_tab_font]}>首页</Text>
        </View>

        <View style={styles.sub_tab_icon}>
          <Image source={require('./imgs/tab_item_02.png')} style={styles.sub_tab_image}/>
          <Text style={styles.sub_tab_font}>行程</Text>
        </View>

        <View style={styles.sub_tab_icon}>
          <Image source={require('./imgs/tab_item_03.png')} style={styles.sub_tab_image}/>
          <Text style={styles.sub_tab_font}>客服</Text>
        </View>

        <View style={styles.sub_tab_icon}>
          <Image source={require('./imgs/tab_item_04.png')} style={styles.sub_tab_image}/>
          <Text style={styles.sub_tab_font}>个人</Text>
        </View>
      </View>
    );
  }

具体的样式见源代码。