是否可以使用React-Native从API渲染多个TextInputs?我正在开发一个从API获取JSON的项目,首先使用FlatList显示Items(仅标题)列表,然后单击其中一个并导航到下一页,其中显示了所选项的详细信息。但是,API中会不断添加新文档,其中包含不同数量的TextInput,有些可能有3个,有些可能有2个等等。文档还包含标题,文本,图像,但这些数量总是相同的1。
我从API获取的JSON文件:
{
"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>
);
}
}
如果我理解得很好你应该试试这个:
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>
如果您有任何疑问,或者有些事情不明确,请告诉我。