在滚动视图中反应原生 100% 宽度视图

Question

我有一个水平滚动视图

在这个 ScrollView 中，我想显示多个全高和全宽视图。

我不知道如何将每个视图的宽度设置为 100%。

实际上就像他们有一个“自动”宽度（大约 70%）

<SafeAreaView style={styles.container}>
    <ScrollView
      style={styles.info}
      horizontal={true}
    >
      {this.state.list.map(item => (
        <View style={styles.item}>...</View>
      ))}
    </ScrollView>
  </SafeAreaView>

还有款式

info: {
 width: "100%",
 height: "100%",
 display: "flex"
},
item: { // props for the items in my views
 display: "flex",
 alignItems: "center",
 justifyContent: "space-between",
 height: "100%",
 paddingTop: 30,
 paddingBottom: 10
}

我试着放，width : "100%"但当然它没有像例外那样工作

谢谢

Answer 1

您必须计算设备或容器的宽度。

import { Dimensions } from 'react-native';

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

Answer 2

如果您不想要设备的尺寸，因为您必须转换 View 的宽度值，您可以使用 ScrollView 的 contentContainerStyle 属性：

<ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{
            flexGrow: 1,
            justifyContent: 'center',
            width: '100%',
          }}
        >

          {history.map((item, index) => (

            <View
              key={index}
              style={{
                height: '10%',
                width: '60%',
                backgroundColor: '#eee',
                alignItems: 'center',
                justifyContent: 'center'
              }}>

              <Text>
                {ToDate(item.timestamp.seconds)[0]}
              </Text>

            </View>
          ))}
</ScrollView>

希望这可以帮助这里的人们！