一、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)