获取JSON时呈现多个文本输入 - 反应本机

Question

是否可以使用反应本性从API呈现多个文本输入？我正在研究一个项目，该项目从API中获取JSON，并首先使用Flatlast显示项目列表（仅标题），然后我单击其中一个，然后导航到下一页，其中显示了该选定项目的详细信息。但是，API中将连续添加新的文档，其中包含不同数量的文本输入，有些可能具有3，2等。文档还包含标题，文本，图像，但这些始终是相同的金额1。

JSON文件我是从API获取的：

{  
  "results":[  
  {  
     "contract":{  
        "title":"Contract test",
        "content":"You can always follow the progress of your application 
  by logging on the the application portal."
     },
    "fillable_fields": {
        "FIELD_NAME_1": "FIELD_VALUE_1",
        "FIELD_NAME_2": "FIELD_VALUE_2",
        "FIELD_NAME_N": "FIELD_VALUE_N"
    },
     "picture":{  
 "medium":"https://www.healthcaredenmark.dk/media/11272/bridgeit_logo.png"
     }
  }
]
}

我的代码：

class DetailScreen extends React.Component {
    static navigationOptions = {
      title: 'Content of selected'
    };
    render() {
      const source = this.props.navigation.state.params.source;
      const item = this.props.navigation.state.params.item;
      let contract = "";
      let img = "";
      let inp = "";
      let content ="";
      if (item != null) {
        contractTitle = item.contract.title;
        img = item.picture.medium;
        content = item.contract.content;
        inp = item.fillable_fields
      }
      return (   
        <View style={styles.container}>
          <Text style={styles.text}>{contractTitle} </Text>
          <Image
            style={{width: 300, height: 128}}
            source={{uri: img}}
          />
          <Text  style={styles.text} > {content} </Text>
          <FlatList>
            <TextInput style={{textAlign: 'center', borderWidth: 1, marginBottom: 7, height: 50}}>
              {inp}
            </TextInput>
          </FlatList>
          <Button title="Go back to the list" onPress={this._goHome}/>
        </View>
      );
    }
}

Answer 1

如果我理解很好，您应该尝试以下操作：

renderInputFields = () => {
    let inputFieldsList = [];
    let arrayFromJson = //extract here your input fields array from JSON
    arrayFromJson.map((inputFieldItem) => {
         inputFieldsList.push(
             <TextInput style={{textAlign: 'center', borderWidth: 1, marginBottom: 7, height: 50}}>
                 {inputFieldItem.text} //.text is example. you should use here what property you need
             </TextInput>)
    });
    return inputFieldsList;
}
 <FlatList>
     {this.renderInputFields()}
 </FlatList>

让我知道您是否有任何疑问，或者有些不清楚。