如何在JSON响应上生成dynaimc UI react-native [英] How to Generate dynaimc UI on JSON response react-native
问题描述
///在这里,我试图生成动态UI.通过API,我得到了JSON格式的响应,我必须在UI上绘制该响应.就像没有定义任何"TextInput"一样,它应该动态生成.下面是一些示例JSON响应.该响应可能会因不同的请求而改变.请帮助,我被困在下面只是一个代码,我不知道该怎么做.
// Here I am trying to generate Dynamic UI . Through API I am getting some response in JSON format , I have to draw that on UI . Like am not defining any "TextInput" it should generate dynamically.Below is some sample JSON response .That may change on different request . Please help , I am stuck below is just one code, I don't know how to do that .
import * as React from 'react';
import { Text, View, StyleSheet, Alert, Picker } from 'react-native';
import { Constants } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
var myloop = [];
export default class UiDynamic extends React.Component {
// add a selectValue to your state to stop the overwriting
state = {
PickerValueHolder: [],
selectedValue: ''
}
componentDidMount() {
// remove the return
fetch('http://userapi/inventory/viewinventorytype', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"username" :"admin",
"password" :"admin"
})
}).then((response) => response.json())
.then((responseJson) => {
// use the inventoryTypeData as it is already an array
let PickerValueHolder = responseJson.inventoryTypeData;
for (let i = 0; i < PickerValueHolder.length; i++) {
datavalue=() => {
<Text>Hello ABhi</Text>
console.log("Hello ABhi");
}
}
this.setState({ PickerValueHolder }); // Set the new state
})
.catch((error) => {
console.error(error);
});
}
GetPickerSelectedItemValue=()=>{
Alert.alert(this.state.PickerValueHolder);
}
render() {
for (let i = 0; i < 10; i++) {
datavalue=() => {
<Text>Hello ABhi</Text>
console.log("Hello ABhi");
}
myloop.push(
<View key={<TextInput></TextInput>}>
<Text style={{ textAlign: 'center', marginTop: 5 }} >{<Text>Hello</Text>}</Text>
</View>
);
}
return (
<View style={styles.container}>
{this.datavalue.bind(this)}
{myloop}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
}
});
//以下是示例JSON响应..假设这里获得了四个属性及其数据类型,因此在UI 4上应生成"TextInput".
// Below is Sample JSON Response .. Suppose here am getting four attributes and their datatype , So on UI 4 "TextInput" should generate .
{
"inventoryTypeData": [{
"data type": int,
"Field 1": ""
}, {
"data type": string,
"Field2": ""
}, {
"data type": int,
"Field 3": ""
}, {
"datatype": int,
"Field4": ""
}],
"success": "true"
}
推荐答案
从"react-native"导入{TextInput};
将响应映射到状态后 this.setState({PickerValueHolder});
然后您可以使用map函数在渲染方法中循环浏览
You can then loop through it in your render method with the map function
return(
<View style={styles.container}>
{this.state.PickerValueHolder.map(data=>(
<View>
<TextInput
placeholder={data.placeholder}
keyboardType={data.datatype==="int" ? 'numeric': 'default'}
onChangeText={(text) => this.setState({...this.state.value [data.name]: text })}
value={this.state.value[data.name]}
/>
<Button
onPress={this.handleButtonPress(data.name).bind(this)}
/>
<View/>
/>
))}
</View>
)
}```
So here you are checking if the datatype is an int and then setting the keyboard type to numeric
This is also setting all the changes to a value object in state.
The Button calls a function with the name of of the value related to the text input
这篇关于如何在JSON响应上生成dynaimc UI react-native的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!