ScrollViewレンダリングされたコンポーネントは、反応のないネイティブでデータなしでレンダリングされますか？

Question

反応ネイティブアプリでScrollViewのページがあります。最初のロード時に、子コンポーネントは、複数のTextInput'sを完全にうまくレンダリングすると言うことができます。

各TextInputには一意のキーがあります。 TextInputフィールドの更新を開始すると、他のコンポーネントが崩壊するだけです。崩壊すると、そのコンポーネントは存在しますが、データは表示されません。 onPressイベントは折りたたまれたコンポーネントで機能しますが、テキストは表示されません。すべてのレンダリングに私が見つけた

一つの方法は、独自のランダムkeyを追加することでしたが、その後のTextInputからの焦点は、優れたユーザーエクスペリエンスではありませんこれは、失われます。

コード：

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state= this.props; 
    } 

    buildList(data) { 
    _.map(data, blog => { 
     return(
     <View key={blog.id}> 
     <Text>{blog.title}</Text> 
     <TextInput 
     placeholder={blog.label} 
     onChangeText={text => onChangeText(text)} 
     value={value} 
     /> 
     </View> 
    ); 
    } 
    } 

    render() { 
    const { 
      data 
     } = this.state; 
    return (
     <View style={mainStyles.pageWrap}> 
     <ScrollView style={mainStyles.contentWrap}> 
      <View> 
      { 
       this.buildList(
       data 
      ) 
      } 
      </View> 
     </ScrollView> 
     </View> 
    ); 
    } 
} 

Answer 1

はdocumentationを経て、スタイル= {{フレックス：1}}添加各子コンポーネントにが、それはそれを修正しました。 （落胆）直接 の高さにビューを設定したり、すべての親ビューが 有界高さを持っていることを確認するのいずれか、ScrollViewの高さをバインドするために

。ビュースタックの{flex：1}を転送するのを忘れると、 はエラーになり、要素インスペクタは デバッグを容易にします。