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

我构建了一个使用数组映射动态填充的视图。这样做后，我意识到视图太大而无法在一个屏幕上包含所有的数组项目。ScrollView切断页面上的最后一个对象

这是我的代码。

  <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>

这并一些滚动性添加到视图，但它仍然切断的最后一个对象的一部分阵列中。

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

谢谢！

来源

2017-07-07 SkyeBoniwell

dhorelik的回答很重要。这可能是因为你需要添加flex：1，或者如果它下面有一个组件，可能是由于该组件的样式与scrollview重叠。此外，只是想提到你永远不应该使用索引作为关键。 –

ScrollView旨在一次显示可滚动内容。由于您正在动态地填充内容，因此您应该使用FlatList。一些类似于以下将工作：

... 
 
_keyExtractor = character => character.Name 
 

 
_renderItem = ({character}) => (
 
    <Text> 
 
     {character.Name} 
 
    </Text> 
 
) 
 

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

详细解释可以in the docs。

如果由于任何原因仍然被迫坚持Scrollview，则问题可能与造型有关。我想styles.flexColumn应通过contentContainerStyle应用于ScrollView本身，而不是其子View。

来源

2017-07-07 18:52:24 dhorelik

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

回答

相关问题