亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

如何在平面列表中水平對齊元素反應本機?

如何在平面列表中水平對齊元素反應本機?

慕斯王 2023-07-29 15:51:31
我是新來的,我不太知道如何實現這種對齊,任何幫助都是值得贊賞的:)我的代碼:? ?<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貢獻1827條經驗 獲得超9個贊

  

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

當您在 Flatlist 中使用列時,您應該注意:

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

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

          )}

        />



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

TA貢獻1853條經驗 獲得超18個贊

為每個項目設置相等的寬度并將文本居中對齊并使父寬度“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

      }, 


```


查看完整回答
反對 回復 2023-07-29
  • 2 回答
  • 0 關注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號