ReactNative-综合案例(01)

最近几天学了几个ReactNative组件,总觉得单纯的学几个组件进步慢,所以我打算做一些综合性的小案例,练习下实战,我从网上找到一个小案例 ,感觉挺好,也学习了很多,代码内容可能不太一样,主要区别是:我把RN官方不推荐或者已经放弃了的组件进行了替换,如果有需要的可以互相参考下

源代码下载

建完一个工程之后,首先建一个WYMain.js文件,代码如下:

首先安装所需组件:

npm install --save react-navigation
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';

import {StackNavigator, TabNavigator} from 'react-navigation';

import WYHome from './WYHome';
import WYMessage from './WYMessage';
import WYFind from './WYFind';
import WYMine from './WYMine';

const TabNav = TabNavigator(
  {
    WYHome: {
      screen: WYHome,
      // path: '/',
      navigationOptions: {
        title: '首页', // 同步设置导航和tabbar文字,不推荐使用
        // headerTitle: '首页',  // 只设置导航栏文字
        // header:{}, // 自定义导航条内容,如果需要隐藏可以设置为null
        // headerBackTitle:null, // 设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null
        // headerTruncatedBackTitle:'', // 设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"。
        // headerRight:{}, // 设置导航条右侧。可以是按钮或者其他。
        // headerLeft:{}, // 设置导航条左侧。可以是按钮或者其他。
        // headerStyle:{
        //         backgroundColor:'#4ECBFC'
        //     }, // 设置导航条的样式。如果想去掉安卓导航条底部阴影可以添加elevation: 0,iOS去掉阴影是。
            // headerTitleStyle:{
            //     fontSize:30,
            //     color:'white'
            // }, // 设置导航条文字样式。安卓上如果要设置文字居中,只要添加alignSelf:'center'就可以了
            // headerBackTitleStyle:{}, // 设置导航条返回文字样式。
            // headerTintColor:'green', // 设置导航栏文字颜色。总感觉和上面重叠了。
            // gesturesEnabled:true, // 是否支持滑动返回收拾,iOS默认支持,安卓默认关闭

            // TabNavigator 属性部分
            // title:'首页',   // 同上
            tabBarVisible:true, // 是否隐藏标签栏。默认不隐藏(true)
        tabBarIcon: ({ tintColor, focused }) => (
          focused
                    ?
                    <Image
                        source={ {uri:'tabbar_home_highlighted'} }
                        style={styles.image}
                    />
                    :
                    <Image
                        source={ {uri:'tabbar_home'} }
                        style={styles.image}
                    />
        ),
      },
    },

    WYMessage: {
      screen: WYMessage,
      // path: '/settings',
      navigationOptions: {
        title: '消息',
        tabBarIcon: ({ tintColor, focused }) => (
        focused
                    ?
                    <Image
                        source={ {uri:'tabbar_message_center_highlighted'} }
                        style={styles.image}
                    />
                    :
                    <Image
                        source={ {uri:'tabbar_message_center'} }
                        style={styles.image}
                    />
        ),
      },
    },

    WYFind: {
      screen: WYFind,
      navigationOptions: {
        title: '发现',
        tabBarIcon: ({ tintColor, focused }) => (
          focused 
            ? 
            <Image 
              source={ {uri:'tabbar_discover_highlighted'} } 
              style={styles.image}
            />
            :
            <Image 
              source={ {uri:'tabbar_discover'}    } 
              style={styles.image}
            />
        ),
      },
    },

    WYMine: {
      screen: WYMine,
      navigationOptions: {
        title: '我的',
        tabBarIcon: ({ tintColor, focused }) => (
          focused 
            ? 
            <Image 
              source={ {uri:'tabbar_profile_highlighted'} } 
              style={styles.image}
            />
            :
            <Image 
              source={ {uri:'tabbar_profile'} } 
              style={styles.image}
            />
        ),
      },
    },
  },
  {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
    tabBarOptions:{
        activeTintColor: '#FF8403', // 改变tabBar选中字体颜色
        // inactiveTintColor: '#CC9999', // 文字和图片默认颜色
        // showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        // indicatorStyle: {
        //     height: 0
        // }, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了, 不知道还有没有其它方法隐藏???
        // style: {
        //     backgroundColor: '#FFFF99', // TabBar 背景色
        // },
        labelStyle: {
            fontSize: 11, // 文字大小
        },
    }
  }
);

const StackNavigators = StackNavigator({
    TabNav: {
      screen: TabNav,
    },
});

const styles = StyleSheet.create({
  image: {
    width:30,
    height:30,
  }
});

export default StackNavigators;

注意点

  • const StackNavigators = StackNavigator({ TabNav: { screen: TabNav, }, }); 这段代码必须放在创建TabNav代码的下面,否则会报已下错误:
  • 如果图片是在Xcode里面的Images.xcassets文件夹下,引入的时候,应该用如下格式:
source={ {uri:'tabbar_profile'} }

同时应当指定宽高才会显示出来

主要代码编写完成之后,只需在index.ios.js引入即可

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import WYMain from './Component/WYMain'

export default class WYNews extends Component {
  render() {
    return (
      <WYMain />
    );
  }
}

AppRegistry.registerComponent('WYNews', () => WYNews);

效果如下:

下一篇将会讲解如何使用轮播图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

动态创建Storyboard

做动画或者做控件的时候不一定都要在xaml里做Storyboard,有时候在代码里动态创建会更加灵活些。 这里以我做的一个改变颜色的Storyboard为例来做...

37340
来自专栏微信小开发

五分钟掌握微信小程序轮播图

从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致 swip...

23960
来自专栏木子昭的博客

让css3动画变得有趣wowjs

animate.css 包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接使用。

25230
来自专栏源码之家

博看网杂志下载时批量更改图片大小

12920
来自专栏葡萄城控件技术团队

ActiveReports 区域报表中的事件介绍

1、仅触发一次的事件 以下是在报表的处理过程中仅触发一次的所有事件这些事件在报表的处理周期中仅在最开始和结束前触发一次。 ReportStart 该事件在Dat...

24070
来自专栏Alice

iOS textfield实现一行的数字限制,超出进行弹框

步骤一:添加textfield协议‘ @interface LsGeXingQianMingVC ()<UITextFieldDelegate>  步骤2:设置...

22970
来自专栏vue学习

微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

(1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

20020
来自专栏非典型技术宅

iOS之分段控制器UISegmentedControl1. 分段控制器(UISegmentedControl)2. 事件监听3. 手势事件大全

12320
来自专栏刘望舒

React Native探索之组件的属性和状态

在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。

15230
来自专栏猛牛哥的博客

快手( AAuto Quicker ) v6.5.06更新记录

14030

扫码关注云+社区

领取腾讯云代金券