我正在使用 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 应用程序与后端服务器集成？

最佳答案

您需要在构造函数中创建一个数据源并将其设置为默认状态，并在获得新数据后再次更改该数据源状态。您还需要为返回行组件的 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>
 }
}

关于javascript - 如何将 React-native 与后端服务器集成？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38816631/