一、项目简介
对于学习来说,效率最高的就方式就是实战,刚开始学习React-Native 有很多语法还不习惯,但是在自己去做项目的时候慢慢熟悉了,越来越得心应手,下面介绍下我做的这个小项目来试试水,这个项目主要还是为了练习熟悉React-Native 中的控件,库的使用和网络请求后数据的加载这几个部分,对于深入的去做,现在并没有涉及到,我们来看看项目的几个截图:
二、主界面的框架搭建
这里主要用到了抽屉布局和横向滑动的tab布局,使用的是react-native库中的 DrawerLayoutAndroid和react-native-scrollable-tab-view中的ScrollableTabView,这样侧滑的抽屉和滑动的tab就搭建成功了,我们来看下代码的实现,DrawerLayoutAndroid有相关的配置其属性和数据,在里面嵌套ScrollableTabView,ScrollableTabView中嵌套的则是标题栏,对于初学者来说,几个比较方便的网页资源还是比较实用的
常用实用的第三方库汇总:
http://www.jianshu.com/p/d9cd9a868764
nativebase组件库API
https://docs.nativebase.io/Components.html#Components
React-Native入门指南
http://reactnative.cn/docs/0.31/tutorial.html#content
return (
<DrawerLayoutAndroid
ref={(drawerObj) => {this.drawer = drawerObj;}}
drawerWidth={240}
drawerPosition={DrawerLayoutAndroid.positions.Left}
drawerBackgroundColor='#FFFFFF'
drawerLockMode={'unlocked'}
keyboardDismissMode={'on-drag'}
renderNavigationView={() => navigationView}>
<View style={{backgroundColor:'#f4f4f4',flex:1}}>
<View style={styles.titleback}>
<View style={styles.menu}>
<TouchableOpacity
onPress={this._pressButton.bind(this)}>
<Image source={require('../images/menu.png')} style={{ width:26,height:26}}/>
</TouchableOpacity >
</View>
<View style={styles.titleview}>
<Text style={styles.titletext}>React-Native</Text>
</View>
<View style={styles.titleRight}>
<Image source={require('../images/actionbar_search.png')} style={{ width:26,height:26}}/>
</View>
</View>
<ScrollableTabView
scrollWithoutAnimation={true}
style={styles.container}
renderTabBar={() => <DefaultTabBar />}
tabBarUnderlineStyle={styles.lineStyle}
tabBarActiveTextColor='#3e62ad'
tabBarHeight={20}
tabBarBackgroundColor='#FFFFFF'>
<BookPage style={styles.textStyle} tabLabel='干货定制'></BookPage>
<EveryDayPage style={styles.textStyle} tabLabel='每日推荐'></EveryDayPage>
<MovieTop250 style={styles.textStyle} tabLabel='豆瓣电影'></MovieTop250>
<FuLiPage style={styles.textStyle} tabLabel='宅男福利'></FuLiPage>
</ScrollableTabView>
</View>
</DrawerLayoutAndroid>
);
三、轮播图及listview的数据加载和网络请求
这里的轮播图控件使用的是react-native-swiper,然后是react-native中的ListView,ScrollView包裹ListView和swiper,从而实现轮播图和listview一起滚动,请求使用的是fecth,在componentDidMount生命周期方法中发起网络请求耗时操作,这样在完成组件渲染的时候再去加载数据,这里的list view的图片的数据都是从网络请求中获取的,componentDidMount中的data数据则是请求成功后返回的json中的一个字段,我们获取这个字段后,可以通过.属性方式去调用这个json的字段的属性值,相对于java来说,省去了bean类去接受json数据,
componentDidMount(){
fetch('http://www.imooc.com/api/teacher?type=4&num=30')
.then((response) => response.json())
.then((jsonData) => { //jsonData就是上一步的response.json()
this.setState({
data: new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2 }).cloneWithRows(jsonData.data),
});
}) //你后面还可以继续疯狂的接.then并且传递数据,尽管试试吧!
.catch((error) => { //注意尾部添加异常回调
alert(error);
});
}
_renderSwiper(){
return (
<Swiper
height={150}
horizontal={true}
autoplay={true}
autoplayTimeout={2.5}
loop={true}
paginationStyle={{bottom:6}}
dotStyle={{backgroundColor:'rgba(0,0,0,.2)', width: 6, height: 6}}
activeDotStyle={{backgroundColor:'#3e62ad', width: 6, height: 6}}>
<View style={styles.swiperItem}>
<Image source={{uri: 'http://business.cdn.qianqian.com/qianqian/pic/bos_client_1502964275f2b3aab5e48490f1912dc2ac30c3a21b.jpg'}}
style={{flex:1}} />
</View>
<View style={styles.swiperItem}>
<Image source={{uri: 'http://business.cdn.qianqian.com/qianqian/pic/bos_client_150288991121d9971fe1e4d0798195c9d85a1a6e22.jpg'}}
style={{flex:1}} />
</View>
<View style={styles.swiperItem}>
<Image source={{uri: 'http://business.cdn.qianqian.com/qianqian/pic/bos_client_1502804546662b529fb9e828989f239ec7fded042f.jpg'}}
style={{flex:1}} />
</View>
<View style={styles.swiperItem}>
<Image source={{uri: 'http://business.cdn.qianqian.com/qianqian/pic/bos_client_15029855602f35699514af6eea48103ed52deac45a.jpg'}}
style={{flex:1}} />
</View>
<View style={styles.swiperItem}>
<Image source={{uri: 'http://business.cdn.qianqian.com/qianqian/pic/bos_client_150294228689a700b3a51503f2e35994ab07939629.jpg'}}
style={{flex:1}} />
</View>
</Swiper>
)
}
render() {
if(!this.state.data){//如果this.state.data没有数据(即网络请求未完成),则返回一个加载中的文本
return(
<View style={styles.container}>
<ScrollView style={{flex:1}}>
<View style={styles.swipercontainer}>
{this._renderSwiper()}
</View>
<View style={{justifyContent:'center',flex:1}}>
<View style={{flexDirection:'column',justifyContent:'center'}}>
<ActivityIndicator
size="large"
color='#3e62ad'
animating={this.state.animating} />
<View style={{alignItems:'center',justifyContent:'center'}}>
<Text
style={{fontSize:16}}>
加载中...
</Text>
</View>
</View>
</View>
</ScrollView>
</View>
);
}
return (
<View style={styles.container}>
<ScrollView style={{flex:1}}>
<View style={styles.swipercontainer}>
{this._renderSwiper()}
</View>
<ListView
style={{backgroundColor:'#E0E0E0'}}
dataSource={this.state.data}
renderRow={(rowData) => this.renderRow(rowData)}>
</ListView>
</ScrollView>
</View>
);
}
renderRow(rowData){//参数为接收的每一行的数据,理解:数组data的子项
return(
<View //最外层包裹的View
style = {styles.lvRow}>
<Image //左侧显示的图片
style = { styles.img }
source = { { uri: rowData.picSmall } }/>
<View //包裹文本的View
style = { styles.textView }>
<Text //标题
style = { styles.textTitle }
numberOfLines = { 1 }>
{ rowData.name }
</Text>
<Text //详细内容文本
style = { styles.textContent }>
{ rowData.description }
</Text>
</View>
</View>
)
}
最后再这里给出项目下载地址:
http://download.csdn.net/download/jacky_can/9945920