Arrays 使用React Native获取JSON文档_Arrays_Json_React Native_Fetch_Document

Arrays 使用React Native获取JSON文档

arrays json react-native

Arrays 使用React Native获取JSON文档,arrays,json,react-native,fetch,document,Arrays,Json,React Native,Fetch,Document,我已经找到了一些类似的解决方案，但没有一个完全符合我的要求下面是我想做的：我有一些文档保存为JSON在服务器中，我想使用React Native获取这些文档并在手机上显示它们。但是，当我不必每次向服务器上载新文档时都更改代码时，可以考虑一种解决方案。React native应该能够从服务器获取所有内容，甚至是新文档，而不必在返回{}中添加新的代码行。这些文档可能彼此不同，有些仅包含文本，有些包含文本和输入字段，有些包含图片、文本和输入字段如果有不清楚的地方，请在评论部分告诉我。如有任何建

我已经找到了一些类似的解决方案，但没有一个完全符合我的要求

下面是我想做的：我有一些文档保存为JSON在服务器中，我想使用React Native获取这些文档并在手机上显示它们。但是，当我不必每次向服务器上载新文档时都更改代码时，可以考虑一种解决方案。React native应该能够从服务器获取所有内容，甚至是新文档，而不必在返回{}中添加新的代码行。这些文档可能彼此不同，有些仅包含文本，有些包含文本和输入字段，有些包含图片、文本和输入字段

如果有不清楚的地方，请在评论部分告诉我。如有任何建议，将不胜感激

JSON的外观示例：

    {  
   "results":[  
      {  

         "contract":{  
            "title":"Contract test",
            "content":"You can always follow the progress of your application by logging on the the application portal. Please note that all communication from DTU will take place via this portal. When we have sent you a message on the ..."
         },

        "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"
         }
      }
   ]
}

我在React Native中的代码：

class HomeScreen extends React.Component {

  constructor() {

    super();
    this.state = {};
    this.getRemoteData();

  }


  static navigationOptions = {
    title: 'List of documents',
  };



  getRemoteData = () => {
    const url = "https://demo8106568.mockable.io/results";
    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: res.results
        });
      })
      .catch(error => {
        console.log("get data error from:" + url + " error:" + error);
      });
  };


  capFirstLetter = (string) => {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }


  renderNativeItem = (item) => {
    const contract =
      this.capFirstLetter(item.contract.title);
      //this.capFirstLetter(item.name.content);

    return <ListItem
            roundAvatar
            title={contract}
            subtitle={item.content}
            avatar={{ uri: item.picture.thumbnail }}
            onPress={() => this.onPressItem(item)}
          />;
  }


     onPressItem = (item) => {
     this.props.navigation.navigate('Detail', {item: item})
   }


  render() {
    return (
      <View>
        <FlatList
          data={this.state.data}
          renderItem={({item}) => this.renderNativeItem(item)}
        />
        {/* <Button
          title="Go Detail"
          onPress={() => this.props.navigation.navigate('Detail', {source: "homescreen"})}
        /> */}
      </View>
    );
  }
}





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) {
      contract = item.contract.title;
      img = item.picture.medium;
      content = item.contract.content;
      inp = item.fillable_fields.FIELD_NAME_1;
    }


    return (

      <View style={styles.container}>

        <Text style={styles.text}>{contract} </Text>

        <Image
          style={{width: 300, height: 128}}
          source={{uri: img}}
        />

        <Text  style={styles.text} > {content} </Text>

        <TextInput style={{textAlign: 'center', borderWidth:1, marginBottom: 7, height: 50}} source={{uri: inp}}/>        

        <Button title="Go back to the list" onPress={this._goHome}/>

      </View>

    );
  }


  _goHome = async () => {
    this.props.navigation.navigate('Home');
  };
}

类主屏幕扩展React.Component{
构造函数（）{
超级（）；
this.state={}；
这是.getRemoteData（）；
}
静态导航选项={
标题：“文件清单”，
};
getRemoteData=（）=>{
常量url=”https://demo8106568.mockable.io/results";
获取（url）
.then（res=>res.json（））
。然后（res=>{
这是我的国家({
数据：res.results
});
})
.catch（错误=>{
log（“从：+url+获取数据错误”错误：+error）；
});
};
capFirstLetter=（字符串）=>{
返回string.charAt（0.toUpperCase（）+string.slice（1）；
}
RenderActivieItem=（项目）=>{
施工合同=
这是第一封信（项目、合同、标题）；
//此.capFirstLetter（项.名称.内容）；
返回此项。onPressItem（item）}
/>;
}
onPressItem=（项目）=>{
this.props.navigation.navigate（'Detail'，{item:item}）
}
render（）{
返回(
this.renderActivItem（项）}
/>
{/*this.props.navigation.navigate（'Detail'，{source:“homescreen”}）}
/> */}
);
}
}
类DetailScreen扩展了React.Component{
静态导航选项={
标题：“所选内容”
};
render（）{
const source=this.props.navigation.state.params.source；
const item=this.props.navigation.state.params.item；
让合同“”；
设img=“”；
设inp=“”；
让内容=”；
如果（项！=null）{
合同=项目.contract.title；
img=item.picture.medium；
content=item.contract.content；
inp=item.filled_fields.FIELD_NAME_1；
}
返回(
{合同}
{content}
);
}
_goHome=async（）=>{
this.props.navigation.navigate（'Home'）；
};
}

我理解你想要实现的目标。但我真的不认为你能让它像你想的那样工作。您可以将其与调用普通API端点进行比较。您很可能会使用以下方法：

getContracts() {
    fetch('CONTRACTS_ENDPOINT').then(res => doSomethingWithContracts(res))
}

您已经知道该数据返回合同，并且您已经知道在那里需要哪些数据。因此，您可以轻松访问诸如

contract.name

或

contract.date

之类的字段

当您想要调用其他端点时，您将执行类似的操作

getSomethingElse() {
    fetch('OTHER_ENPOINT').then(res => ...)
}

您将知道

其他ENPOINT

附带的数据，因此您可以直接访问其字段

因此，我的建议是，将每个文档看作一个单独的API端点。当然，如果您更改文档，还需要更改客户端实现，因此，例如，如果您将

contract.title

重命名为

contract.otherWordForTitle

，则显然您也需要在客户端上更改它

据我所知，您想要的是，让客户机始终知道文档结构而不进行更新，以便知道文档已更改，这是不可能的。但是，当然，我可能错了，可能有一个解决办法：-）

我理解您试图实现的目标。但我真的不认为你能让它像你想的那样工作。您可以将其与调用普通API端点进行比较。您很可能会使用以下方法：

getContracts() {
    fetch('CONTRACTS_ENDPOINT').then(res => doSomethingWithContracts(res))
}