I am using django as the backend, and react-native for the app. When the app is opened inside the react-native app, on componentDidMount()
, the method will will request through the url to the django server:
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>
);
}
}
And the server will respond with an array of json objects. Like so:
[
{
"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"
}
}
]
Since I have enabled remote debugging, I can see the json objects in the console.
I know the basic of creating a ListView
. My problem is, when the array of objects are fetched, how can I use that array of objects to render it with the ListView
, so that I can display the title and body for each list item. Do I create a separate state in the constructor and add it to the dataSource? How do you integrate react-native app with the backend server?
There are several currently available backend options for developing applications for mobile platforms with the React Native framework. The decision of a backend for your React Native app can be pretty crucial for ensuring ideal development results.
When nodejs-mobile-react-native was installed with npm, it created a nodejs-assets/nodejs-project/ path inside your application's root folder. That's your app's node home path. It's where you put your app's Node. js code, and its contents will be packaged with your application.
You will need to create a datasource in constructor and set it as default state and change that datasource state again once you get new data. And you will also need to set renderRow prop for ListView which returns row component . Your code could look this following:
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>
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With