ボタンを押すと表示される余分なコンポーネントを反応ネイティブで表示するにはどうすればいいですか？

Question

これは理想的な方法論の質問です。私はネイティブに反応するのが初めてで、自分の所有する車のリストを入力するように求めるアプリを開発しています。

アプリ画面に到着すると、1つの車の情報を入力するフィールドが表示されます。

しかし、同じページの上記の入力フィールドの下にある[車を追加]ボタンを押すと、別の車に関する情報を追加するためのフィールドがもう1つ表示されます。

これを行うための理想的な方法は、

• 私はその後機能
• のレンダリングにデフォルトで表示車情報フィールドの1セットを持って、私は次のように行われている、

  何を、私がしているです'add car'タッチ可能なハイライト

• タッチ可能なハイライトをクリックすると、追加する新しいフィールドセット（Textinput>など）を返す関数が呼び出される

返された情報をページに追加するにはどうすればよいですか？ 開始時に "Textinput等"を含む状態変数を更新するべきですか？ "後で？

Answer 1

これはmapのための理想的なユースケースのように聞こえる：

updateCar (index, name) { 
    let cars = this.state.cars 

    // Update the value 
    cars[index].name = name 

    this.setState({ 
    cars: cars 
    }) 
} 

addCar() { 
    let cars = this.state.cars 

    // Add the new car 
    cars.push({ name: '' }) 

    this.setState({ 
    cars: cars 
    }) 
} 

render() { 
    let me = this 

    return (
    <View> 
     {this.state.cars.map(function(car, index) { 
     return (<TextInput onChangeText={(text) => me.updateCar(index, name)} 
          value={me.state.cars[index].name} />) 
     })} 
     <TouchableHighlight onPress={this.addCar}> 
     <Text>Add Car</Text> 
     </TouchableHighlight> 
    </View> 
) 
} 

があり、それぞれの方法のためにあなたのconstructor()でthis.addCar.bind(this)を使用することを忘れないでください。

map()関数を使用すると、コレクションを繰り返し処理し、そのコレクション内の各アイテムの値を返すことができます。ここでは、生の車のデータを取得し、UI要素を返すことができます。