【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)