【React Native入門系列文章 八】基礎組件&網絡通信&緩存處理

一、react native提供的組件：

react native的基礎通用組件包括：

Text、Image、TextInput、ListView、View、WebView、Switch、Slider、ScrollView、MapView等。

只適用於Android平臺的組件包括：

DrawerLayoutAndroid、ProgressBarAndroid、ToolBarAndroid等。

只適用於iOS平臺的組件包括：

ProgressViewIOS、SegmentedControlIOS等。

下面以Image、ListView爲例進行介紹

（1）Image組件

顯示網絡圖片

<Image source={{uri:'http://www.trinea.cn/wp-content/uploads/2016/12/react-native-image2.png?4b7be9&x24892'}}></Image>

顯示本地圖片

<Image source={require('./img/codekk.png')}></Image>

（2）ListView組件

export default class List extends Component {
    state = {
        movies: movies.subjects,
        refreshing: false,
        childState: '',
    };

    render() {
        const {movies, refreshing, childState} = this.state;
        const {navigate} = this.props.navigation;
        return (
            <View>
                <FlatList
                    style={styles.row}
                    numColumns={3}
                    keyExtractor={item => item.id}
                    onRefresh={this.fetchdata}
                    refreshing={refreshing}
                    data={movies}
                    renderItem={
                 ({item}) =>
                 <Item
                 title={item.title}
                 image={item.images.large}
                 stars={item.rating.stars}
                 onPress={() => navigate('Detail',{
                     id: item.id,
                     callback: (data) => {
                         this.setState({
                             childState: data
                         })
                     }
                 })}/>
                 }
                />
            </View>

        );
    }
}

二、react native網絡請求：

react native支持fetch()、webSocket()、xmlHttpRequest()三種請求方式，其中fetch更爲常用：

    const api = 'http://api.douban.com/v2/movie/in_theaters';
    fetchdata = () => {
        fetch(api)
            .then((response) => response.text())
            .then((responseText) => {
                const json = JSON.parse(responseText);
                this.setState({
                    movies: json.subjects,
                });
            })
            .catch((error) => {
                console.error(error);
            });
    };

表示從網絡獲取數據並setState()。

三、react native緩存處理

react native爲我們提供了緩存api。
存緩存：

AsyncStorage.getItem(key)

取緩存:

AsyncStorage.setItem(key,value)