ScrollViewはページ上の最後のオブジェクトを切り捨てます

Question

配列マッピングを使用して動的に読み込まれるビューを作成しました。これを実行した後、Viewが大きすぎてすべての配列アイテムを1つの画面に格納できないことに気付きました。

ここに私のコードです。

  <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を使用する必要があります。次のようなものに動作します：

... 
 
_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は、そのを介してScrollView自体に、その '子View'ではなく適用されるべきだと思います。