// 在这里,我正在尝试生成动态 UI。通过 API,我得到了一些 JSON 格式的响应,我必须在 UI 上绘制它。就像我没有定义任何“TextInput”一样,它应该动态生成。下面是一些示例 JSON 响应。这可能会因不同的请求而改变。请帮忙,我被困在下面只是一个代码,我不知道该怎么做。
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”应该生成。
{
"inventoryTypeData": [{
"data type": int,
"Field 1": ""
}, {
"data type": string,
"Field2": ""
}, {
"data type": int,
"Field 3": ""
}, {
"datatype": int,
"Field4": ""
}],
"success": "true"
}