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

Question

我想在 horizontal FlatList 的渲染项上使用屏幕的宽度。但是，它没有按预期工作。当 horizontal 为 false 时，百分比值有效。但是当 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

Answer 1

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

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