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

最新推荐文章于 2024-04-08 09:53:10 发布

Jacky_Can

最新推荐文章于 2024-04-08 09:53:10 发布

阅读量1.8k

点赞数

分类专栏： React-Native 文章标签： react-native swiper drawer 轮播图 fecth

本文链接：https://blog.csdn.net/Jacky_Can/article/details/77498828

版权

React-Native 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、项目简介

对于学习来说，效率最高的就方式就是实战，刚开始学习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

Jacky_Can

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ReactNative开发(四)之小项目开发案例

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

扫一扫