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

Question

我使用 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 objects 的数组。像这样：

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

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

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

Answer 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),
                    }
                });

Answer 2

您需要在构造函数中创建一个数据源并将其设置为默认状态，并在获得新数据后再次更改该数据源状态。并且您还需要为 ListView which returns row component 设置 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>
 }
}

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

How to integrate React-native with backend server?

javascript

django

react-native

react-native-listview

react-native-android