如何在 JSON 响应 react-native 上生成动态 UI [英] 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"
}

推荐答案

import { TextInput } from 'react-native';

一旦您将响应映射到状态this.setState({ PickerValueHolder });

Once you have mapped your response to state 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 响应 react-native 上生成动态 UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！