從零開始學習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>
    );
  }

具體的樣式見源代碼。