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

Z时代
2024-01-10
分类：综合

react

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

附上Github地址，欢迎star

一、布局主要内容如下：

1、搜索栏的布局
2、图片轮播
3、类似九宫格的布局
4、图片、文字混合布局
5、底部布局

主要使用的控件

StyleSheet
Text
PixelRatio
ScrollView
Image
View
TextInput

记得导出与引用

导出单独的样式

module.exports= Search;

在主文件中使用

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

二、搜索栏布局实现

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>
    );  }

具体的样式见源代码。

三、图片轮播

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

$ 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>

具体的样式见源代码。

四、类似九宫格的布局

<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>

具体的样式见源代码。

五、图片、文字混合布局

<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>

具体的样式见源代码。

六、底部布局

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>
    );  }