当水平为真时，百分比不适用于 FlatList 渲染项

Posted 2023-02-16

【中文标题】当水平为真时，百分比不适用于 FlatList 渲染项

【英文标题】：Percentage does not work with FlatList render item when horizontal is true

【发布时间】：2018-07-06 17:52:31

【问题描述】：

我想在horizontal FlatList 的渲染项上使用屏幕宽度。但是，它没有按预期工作。当horizontal 为假时，百分比值有效。但是当horizontal为真时，百分比值就不起作用了。

class App extends React.Component 
  _renderItem = ( item ) => 
    return (
      <View
        style=
          width: '100%',
          height: 100,
        >
        <Text>item.key</Text>
      </View>
    );
  ;

  render() 
    return (
      <View style=styles.container>
        <FlatList
          data=[ key: 1 ,  key: 2 ,  key: 3 ]
          renderItem=this._renderItem
          horizontal=true
        />
      </View>
    );
  

Snack link when the FlatList is horizontal

Snack link when the FlatList is NOT horizontal

【参考方案1】：

我想我记得有人提到过类似的事情。使用维度在这里有效。见这里：https://snack.expo.io/H1-wnC5HM

我宁愿用弹性或百分比来解决它，但很好。

【讨论】：

是的，我认为这是唯一的方法。谢谢。

没有百分比的方法吗？我的意思是如果容器不适合整个屏幕，这将不起作用，因为父级没有正确的宽度（不等于屏幕宽度）。

宽度百分比在某些情况下确实有效。这只是特定于滚动视图。如果这不起作用，您始终可以使用 View 的 onLayout 属性，它将为您提供父级的宽度，您可以使用该值来设置子级的样式。如果这对您没有帮助，请发布问题并发布链接