2019/05/05
Airtable是個雲端服務,提供類似試算表的資料庫,可以利用airtable提供的javascript library或者利用REST存取資料。在這邊先介紹如何透過REST存取資料。
react native可以利用javascript內建的fetch來呼叫RESTful web services,也可以利用Axios,採用Axios的好處是,Axios會自動處理json的內容 (詳參: Fetch vs. Axios.js for making http requests)。
首先,先安裝axios
npm install axios
先利用react裡的axios+rest範例,先把UI的部分改成react native的FlatList
import React from 'react';
import axios from 'axios';
import { View, Text, FlatList } from 'react-native';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.persons}
renderItem={({item}) => <Text>{item.id}, {item.name}</Text>}
keyExtractor={({name}, index) => name}
/>
</View>
)
}
}
連接airtable,是透過Bearer token,所以,要設定header,並將airtable的API取代程式中的XXXXXXXXXXXXXXXXX。
Authorization: 'Bearer XXXXXXXXXXXXXXXXX'
也要將appLNbQOB0WL1ZeDD取代為你的Base id,Table%201,取代為你的table名稱,如果table名稱有空白,就要用%20取代(URI Encode)。
axios.get(`https://api.airtable.com/v0/appLNbQOB0WL1ZeDD/Table%201?maxRecords=30&view=Grid%20view`)
取得的資料格式:
{
"records": [
{
"id": "rec6USTCW7WQS1D4H",
"fields": {
"City": "台北市",
"Age": 8,
"Name": "Ben"
},
"createdTime": "2019-03-08T06:18:45.000Z"
},
{
"id": "recM3qifn7g8hlLhy",
"fields": {
"City": "新北市",
"Age": 6,
"Name": "Ana"
},
"createdTime": "2019-03-08T06:18:45.000Z"
},
{
"id": "rec9yMWV1aqzQv0g3",
"fields": {
"City": "台北市",
"Age": 7,
"Name": "Mary"
},
"createdTime": "2019-03-08T06:18:45.000Z"
}
],
"offset": "rec9yMWV1aqzQv0g3"
}
因為資料會包在records裡,所以,取得資料時,要多records
const persons = res.data.records;
因為資料內容又包在fields中,取得時要加fields
renderItem={({item}) => <Text>{item.fields.Name}, {item.fields.Age}</Text>}
如果在FlatList中使用ListItem,可以另外定義在renderItem裡(也可以像上面那樣寫在裡面)
<FlatList
data={this.state.persons}
renderItem={this.renderItem}
keyExtractor={({id}, _index) => id}
/>
renderItem的內容
renderItem = ({ item }) => (
<ListItem
title={item.fields.Name}
onPress={() => this.onPress(item.fields)}
/>
)
程式碼:
import React from 'react';
import axios from 'axios';
import { View, FlatList,Alert } from 'react-native';
import { ListItem } from 'react-native-elements';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.defaults.headers = {
'Content-Type': 'application/json',
Authorization: 'Bearer XXXXXXXXXXXXXXXXX'
}
axios.get(`https://api.airtable.com/v0/appLNbQOB0WL1ZeDD/Table%201?maxRecords=30&view=Grid%20view`)
.then(res => {
const persons = res.data.records;
this.setState({ persons});
})
}
onPress = (fields) => (
//console.log('Age:'+age)
Alert.alert(fields.Name, 'Age:'+fields.Age +' City:'+fields.City)
//alert('Age:'+age +' City:'+city)
)
renderItem = ({ item }) => (
<ListItem
title={item.fields.Name}
onPress={() => this.onPress(item.fields)}
/>
)
render() {
return (
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.persons}
renderItem={this.renderItem}
keyExtractor={({id}, _index) => id}
/>
</View>
)
}
}
接下來