Question

这是我的代码。我希望产品视图占据其父级的90％宽度。但是，以下设置无效。

...任何想法如何实现不使用维度？

   return (
        <LazyloadScrollView
            style={styles.container}
            contentContainerStyle={styles.content}
            name="scrollImage" >
          {list.map((product, i) => <View key={i} style={styles.product}>
            <LazyloadImage
                host="scrollImage"
                style={styles.image}
                source={image}
                animation={false}>
              <View style={styles.id}>
                <Text style={styles.idText}>{product.id}</Text>
              </View>
            </LazyloadImage>
          </View>)
          }
        </LazyloadScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  content: {
    paddingTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
      backgroundColor: '#eee'
  },
    product: {
        flex: 0.9,
        marginTop: 5,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#FFFFFF'
    },

Answer 1

为什么不使用Dimensions？它将使您的应用能够做出响应。

如果您不想使用尺寸，请在容器中尝试一些样式设置，例如，使用填充物使其成为全宽

container: {
    backgroundColor: '#ffffff',
    alignSelf: 'stretch',
    padding: 30
  }

我不知道它是否有效，因为您必须发布剩余的代码来测试它，但继续使用样式和flex属性，直到您使其工作，不应该花费很长时间。

顺便说一句，总是很高兴再次访问official layout props docs from react native

css tricks guide to flexbox

反应原生，孩子的宽度百分比

1 个答案: