如何将 React-native 与后端服务器集成？答案

【问题标题】：How to integrate React-native with backend server?如何将 React-native 与后端服务器集成？
【发布时间】：2016-12-13 11:40:26
【问题描述】：

我使用 django 作为后端，并为应用程序使用 react-native。当应用程序在 react-native 应用程序中打开时，在 componentDidMount() 上，该方法将通过 url 向 django 服务器请求：

export default class App extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.fromServer()
    }
    fromServer() {
        var headers = new Headers();
        headers.append('Accept', 'application/json');
        let a = fetch('http://xxx.xxx.xx.xx:8080/posts/', headers)
            .then(function(response) {
                console.log('fetched...')
                    if (response.status !== 200) {
                        console.log('There was a problem. Status Code: ' +  response.status);  
                        return;
                    }
                    response.json().then(function(data) {  
                        console.log(data);
                    });  
                }  
            )  
            .catch(function(err) {  
                console.log('Fetch Error :-S', err);  
            });
    }
    render() {
        return (
            <View>
                <ListView dataSource=?????></ListView>
            </View>
        );
   }
}

服务器将响应一个 json 对象数组。像这样：

[
    {
        "id": 7,
        "target": {
            "body": "This is the body",
            "title": "Airbnb raising a reported $850M at a $30B valuation"
        }
    },
    {
        "id": 11,
        "target": {
            "body": "This is the body",
            "title": "Browsing the APISSS"
        }
    }
]

由于我启用了远程调试，我可以在控制台中看到 json 对象。

我知道创建ListView 的基本知识。我的问题是，当获取对象数组时，如何使用该对象数组以ListView 呈现它，以便我可以显示每个列表项的标题和正文。我是否在构造函数中创建一个单独的状态并将其添加到数据源中？如何将 react-native 应用与后端服务器集成？

【问题讨论】：

看看这个：https://www.npmjs.com/package/react-native-web-service-handler

标签： javascript django react-native react-native-android react-native-listview

【解决方案1】：

只要你收到有效的回复，你就可以这样做

response.json().then(function(data) {  
                    console.log(data);
                    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
                    this.state={
                       dataSource: ds.cloneWithRows(data),
                    }
                });

【讨论】：

我需要在构造函数中创建dataSource 状态吗？多一点信息会很有帮助。
是的......你可以在构造函数和响应中添加它。我也不知道我在学习阶段的最佳实践，但你会得到你想要的！

【解决方案2】：

您需要在构造函数中创建一个数据源并将其设置为默认状态，并在获得新数据后再次更改该数据源状态。您还需要为返回行组件的 ListView 设置 renderRow 属性。您的代码可能如下所示：

export default class App extends React.Component {
constructor(props) {
    super(props)
    //---> Create DataSource
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
   this.state = {dataSource:ds}
}
componentDidMount() {
    this.fromServer()
}
fromServer() {
    var headers = new Headers();
    headers.append('Accept', 'application/json');
    let a = fetch('http://xxx.xxx.xx.xx:8080/posts/', headers)
        .then((response) => {
            console.log('fetched...')
                if (response.status !== 200) {
                    console.log('There was a problem. Status Code: ' +  response.status);  
                    return;
                }
                response.json().then(function(data) {  
                    //---> Change DATASOURCE STATE HERE
                    this.setState(dataSource:this.state.dataSource.cloneWithRows(data))
                });  
            }  
        )  
        .catch(function(err) {  
            console.log('Fetch Error :-S', err);  
        });
}
render() {
   //--> set correct datasource
    return (
        <View>
            <ListView renderRow={this.renderRow.bind(this)} dataSource={this.state.dataSource}></ListView>
        </View>
    );
 }
 renderRow(rowInformation)
 {
   return <Text>{rowInformation.title}</Text>
 }
}

【讨论】：