第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在平面列表中水平對齊元素反應(yīng)本機?

如何在平面列表中水平對齊元素反應(yīng)本機?

慕斯王 2023-07-29 15:51:31
我是新來的,我不太知道如何實現(xiàn)這種對齊,任何幫助都是值得贊賞的:)我的代碼:? ?<View style={styles.calendar}>? ? ? <View style={styles.calendar_week}>? ? ? ? <FlatList? ? ? ? ? data={daysWeek}? ? ? ? ? keyExtractor={(item) => item.id}? ? ? ? ? numColumns={7}? ? ? ? ? renderItem={({item}) => (? ? ? ? ? ? <Text style={styles.dayWeek}>{item.day}</Text>? ? ? ? ? )}? ? ? ? />? ? ? </View>? ? ? <View style={styles.calendar_week}>? ? ? ? <FlatList? ? ? ? ? data={days}? ? ? ? ? style={styles.calendar_week_days}? ? ? ? ? numColumns={7}? ? ? ? ? renderItem={({item}) => <Text style={styles.daysWeek}>{item}</Text>}? ? ? ? />? ? ? </View>? ? </View>calendar: {? ? width: '100%',? ? alignItems: 'center',? },calendar_week: {? ? width: '90%',? ? backgroundColor: 'green',? ? flexDirection: 'row',? },? dayWeek: {? ? fontSize: 18,? ? marginHorizontal: 16,? },? calendar_week_days: {? ? width: '90%',? ? backgroundColor: 'red',? },? daysWeek: {? ? marginHorizontal: 19,? }, ```
查看完整描述

2 回答

?
素胚勾勒不出你

TA貢獻(xiàn)1827條經(jīng)驗 獲得超9個贊

  

https://img1.sycdn.imooc.com//64c4c5270001526606351296.jpg

當(dāng)您在 Flatlist 中使用列時,您應(yīng)該注意:

列寬根據(jù)該平面列表的項目數(shù)量動態(tài)更改,因此為了避免您應(yīng)該對項目使用固定寬度。如果您想以相同的方式擁有另一個平面列表,您也應(yīng)該對該平面列表項目使用相同的樣式

<FlatList

          data={["aa","vv","aaz","zz","sv","qq","ee",]}

          keyExtractor={(item) => item.id}

          numColumns={7}

          style={{width:600}}

          contentContainerStyle={{width:100}}

          renderItem={({item}) => (

              <View style={{backgroundColor:"green",marginHorizontal:4,width:50,alignItems:"center"}}>

                   <Text style={styles.dayWeek}>{item}</Text>

              </View>

           

          )}

        />

        <FlatList

          data={["1","2","3","4","5","6","9","12","13","11","22","43","41","2","3","1","2","3",]}

          keyExtractor={(item) => item.id}

          numColumns={7}

          renderItem={({item}) => (

            <View style={{backgroundColor:"red",marginHorizontal:4,marginVertical:3,width:50,alignItems:"center"}}>

            <Text >{item}</Text>

       </View>

          )}

        />



查看完整回答
反對 回復(fù) 2023-07-29
?
慕容森

TA貢獻(xiàn)1853條經(jīng)驗 獲得超18個贊

為每個項目設(shè)置相等的寬度并將文本居中對齊并使父寬度“100%”


import { Dimensions } from 'react-native';


const windowWidth = Dimensions.get('window').width;

const itemWidth = windowWidth/7 ;

    calendar: {

        width: '100%',

        alignItems: 'center',

      },

    calendar_week: {

        width: '100%',

        backgroundColor: 'green',

        flexDirection: 'row',

      },

      dayWeek: {

        fontSize: 18,

        textAlign:"center",

        width:itemWidth -> change here

      },

      calendar_week_days: {

        width: '100%',

        backgroundColor: 'red',

      },

      daysWeek: {

       textAlign:"center",

       width:itemWidth  -> change here

      }, 


```


查看完整回答
反對 回復(fù) 2023-07-29
  • 2 回答
  • 0 關(guān)注
  • 175 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號