Question

我构建了一个使用数组映射动态填充的视图。执行此操作后，我意识到视图太大而无法在一个屏幕上包含所有数组项。

这是我的代码。

            <View style={[styles.flexColumn]}>
                {Characters.map((character, i) =>
                  <View key={i} style={[styles.flexRow]}>
                        <View>
                            <Text>
                                {character.Name}
                            </Text>
                       </View>
                  </View>   
                )}
            </View>

所以我尝试像这样添加一个滚动视图：

    <ScrollView>
                <View style={[styles.flexColumn]}>
                    {Characters.map((character, i) =>
                       <View key={i} style={[styles.flexRow]}>
                            <View>
                                <Text>
                                    {character.Name}
                                </Text>
                            </View>
                       </View>  
                   )}
                </View>
    </ScrollView>

这确实为视图添加了一些可滚动性，但它仍然会切断数组中最后一个对象的一部分。

有没有办法解决这个问题？

谢谢！

Answer 1

ScrollView旨在一次显示可滚动内容。由于您是动态填充内容，因此您应该使用FlatList。类似于以下内容的方法可行：

＆＃13;

...
_keyExtractor = character => character.Name

_renderItem = ({character}) => (
    <Text>
        {character.Name}
    </Text>
)

render() {
  return (
    <FlatList
      data={Characters}
      keyExtractor={this._keyExtractor}
      renderItem={this._renderItem}
    />
  )
}
...

＆＃13;

详细说明in the docs。

如果您因任何原因仍被迫坚持Scrollview，问题可能与样式有关。我认为styles.flexColumn应该通过ScrollView应用于contentContainerStyle，而不是{＆＃39}}。孩子View。

ScrollView会切断页面上的最后一个对象

1 个答案: