json - 获取 JSON 时呈现多个 TextInput - React Native
问题描述
是否可以使用 React-Native 从 API 呈现多个 TextInput?我正在开发一个从 API 获取 JSON 并首先使用 FlatList 显示项目列表(仅标题)的项目,然后单击其中一个并导航到显示该选定项目详细信息的下一页。但是,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>
如果您有任何问题或不清楚的地方,请告诉我。
推荐阅读
- javascript - JavaScript 无法遍历 Map 键或值
- c++ - c++ 头文件(关于冗余的一般问题)
- haskell - 在 Haskell 中选择对函数
- javascript - 当验证失败时,如何使输入边框颜色变为红色?(仅限原版 JavaScript)
- python - 未定义名称“StandardScaler”
- php - 如何在树枝中将 RangeType 值显示为表格?
- python - Discord.py 不识别成员
- azure-webjobs - 在 Webjobs SDK 3.x 中使用 ServiceBusTrigger,Singleton 属性可以使用 UserProperty 作为范围吗?
- python - 对 2d numpy 中的行求和
- java - 加密/解密 RSA 通信 Java-PHP