ReactNative开发(四)之小项目开发案例

来源：互联网发布：仿淘宝手机网站模板编辑：程序博客网时间：2024/06/05 22:57

一、项目简介

对于学习来说，效率最高的就方式就是实战，刚开始学习React-Native 有很多语法还不习惯，但是在自己去做项目的时候慢慢熟悉了，越来越得心应手，下面介绍下我做的这个小项目来试试水，这个项目主要还是为了练习熟悉React-Native 中的控件，库的使用和网络请求后数据的加载这几个部分，对于深入的去做，现在并没有涉及到，我们来看看项目的几个截图：

这里写图片描述

二、主界面的框架搭建

这里主要用到了抽屉布局和横向滑动的tab布局，使用的是react-native库中的 DrawerLayoutAndroid和react-native-scrollable-tab-view中的ScrollableTabView，这样侧滑的抽屉和滑动的tab就搭建成功了，我们来看下代码的实现，DrawerLayoutAndroid有相关的配置其属性和数据，在里面嵌套ScrollableTabView，ScrollableTabView中嵌套的则是标题栏，对于初学者来说，几个比较方便的网页资源还是比较实用的

常用实用的第三方库汇总：http://www.jianshu.com/p/d9cd9a868764nativebase组件库APIhttps://docs.nativebase.io/Components.html#ComponentsReact-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

阅读全文

0 0