Làm thế nào để tích hợp React-native với máy chủ phụ trợ?

Question

Tôi đang sử dụng django làm phụ trợ và phản ứng gốc cho ứng dụng. Khi ứng dụng được mở ra bên trong ứng dụng phản ứng bản địa, trên componentDidMount(), phương pháp này sẽ sẽ yêu cầu thông qua url đến máy chủ 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> 
     ); 
    } 
} 

Và các máy chủ sẽ trả lời với một mảng của các đối tượng json. Cũng giống như vậy:

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

Kể từ khi tôi đã kích hoạt gỡ lỗi từ xa, tôi có thể nhìn thấy các đối tượng json trong giao diện điều khiển.

Tôi biết cơ bản tạo một ListView. Vấn đề của tôi là, khi mảng các đối tượng được tìm nạp, làm thế nào tôi có thể sử dụng mảng đối tượng đó để render nó với ListView, để tôi có thể hiển thị tiêu đề và nội dung cho mỗi mục danh sách. Tôi có tạo một trạng thái riêng biệt trong hàm tạo và thêm nó vào dataSource không? Làm cách nào để bạn tích hợp ứng dụng gốc tự nhiên với máy chủ phụ trợ?

Answer 1

Bạn sẽ cần phải tạo ra một nguồn dữ liệu trong xây dựng và thiết lập nó như là trạng thái mặc định và thay đổi trạng thái nguồn dữ liệu một lần nữa một khi bạn có được dữ liệu mới. Và bạn cũng sẽ cần phải đặt renderRow prop cho ListView trả về thành phần hàng. Mã của bạn có thể trông như sau:

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

Answer 2

bất cứ khi nào u nhận được câu trả lời hợp lệ, bạn chỉ có thể làm

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