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

【问题标题】：React Native 100% width view in scrollView在滚动视图中反应原生 100% 宽度视图
【发布时间】：2019-12-28 18:40:17
【问题描述】：

我有一个水平滚动视图

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

我不知道如何将每个 View 的宽度设置为 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%"，但它当然没有例外

谢谢

【问题讨论】：

标签： react-native view scrollview

【解决方案1】：

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

import { Dimensions } from 'react-native';

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

【讨论】：

谢谢！现在看起来很明显......^^我会接受答案
很高兴为您提供帮助。顺便说一句，这似乎是一种 hacky 方式，但我实际上一直在使用这种方法，包括在生产中。

【解决方案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>

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

【讨论】：