Как интегрировать React-native с backend server?

я использую django в качестве бэкэнда и react-native для приложения. Когда приложение открывается внутри приложения react-native, on 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 0M at a B valuation"
        }
    },
    {
        "id": 11,
        "target": {
            "body": "This is the body",
            "title": "Browsing the APISSS"
        }
    }
]

поскольку я включил удаленную отладку, я могу видеть объекты json в консоли.

Я знаю основы создания ListView. Моя проблема в том, когда массив объектов извлекается, как я могу использовать этот массив объектов для его отображения с помощью ListView, чтобы я мог отображать заголовок и тело для каждого элемента списка. Создать отдельное состояние в конструкторе и добавить его в источник данных? Как интегрировать react-native app с серверным сервером?

7
django javascript react-native react-native-android react-native-listview

2 ответов

вам нужно будет создать источник данных в конструкторе и установить его как состояние по умолчанию и изменить это состояние источника данных снова, как только вы получите новые данные. И Вам также нужно будет установить renderrow prop для ListView, который возвращает компонент строки . Ваш код может выглядеть следующим образом:

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

всякий раз, когда вы получаете действительный ответ, вы можете просто сделать 

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