简单的切换页面(类似于微信)

//在App.js中实现import React from ‘react‘;
import { StyleSheet, Text, View } from ‘react-native‘;
import {
  StackNavigator,
  TabNavigator,
  TabBarBottom,
} from ‘react-navigation‘;

const MainView = TabNavigator({
  MessageView:{screen:MessageView},
  FriendView:{screen: FriendView},
  MyView:{screen:MyView},
  SetView:{screen:SetView},
},{
  tabBarComponent:TabBarBottom,
  tabBarPosition:‘bottom‘,
  swipeEnabled:false,
  tabBarOptions:{
    // showLabel:false,
    style:{
      height:70,
    }
  }
});

//在你需要切换的页面实现
import React, { Component } from ‘react‘;
import {
  View,
  Text,
  StyleSheet,
  Button,
  Image,
  Dimensions,
  FlatList,
} from ‘react-native‘;

export default class FriendView extends Component {
  static navigationOptions={
    title:‘朋友‘,
    headerLeft:null,
    headerTitleStyle:{
        alignSelf:‘center‘,
    },
    tabBarIcon:({ focused, tintColor})=>{
      if(focused==true){
        return(
          <Image
            style={{width:40,height:40}}
            source={require(‘../assets/images/icon2.png‘)}
          />
        )
      }else {
        return(
          <Image
            style={{width:35,height:35}}
            source={require(‘../assets/images/icon3.png‘)}
          />
        )
      }
    }
  }

 
时间: 08-11

简单的切换页面(类似于微信)的相关文章

Android笔记-4-实现登陆页面并跳转和简单的注册页面

实现登陆页面并跳转和简单的注册页面 首先我们来看看布局的xml代码 login.xml <span style="font-family:Arial;font-size:18px;"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

python之urllib2简单解析HTML页面

一.urllib2简单获取html页面 #!/usr/bin/env python # -*- coding:utf-8 -*- import urllib2 response = urllib2.urlopen('http://www.baidu.com'); html = response.read(); print html 简单的几行代码就能拿到html页面,接下来局势html的解析工作了. 想象很美好,实际操作就出问题了.baidu没有禁止机器人抓取可以正常抓取到页面,但是比如:htt

PushState+Ajax实现简单的单页面应用SPA

http://www.helloweba.com/view-blog-386.html 单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好.速度快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染,从而相对减轻了服务器压力,SPA在WEB移动端应用非常广泛. 我们在上一篇文章Javascript实现前端简单路由中提到的前端路由,可以在不刷新整个页面的情况下,通过变换地址栏的hash来实现页面局部加载. 今天我要给大家介绍的是

【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2285.html 在第五篇中介绍了使用导航Navigator进行(页面)场景的切换,但是对于一些需求其实是无法满足,或者说太浪费.例如: 1. 只是想做一个很简单的页面切换,并不需要记录从哪来-也不需要手势滑屏返回等,这时使用导航Navigator太浪费了. 2. 假设: a) 有个View 包括一个Navigato

第十篇 编写一个简单的注册页面

一个简单的注册页面 今天的课程学习,我们来一波综合,将前面学到的东西,做一次小练习,我们自定义一个注册页面,不需要太华丽,能表达清楚意思就可以了. <!DOCTYPE html> <html> <head lang="en"> <!--支持中文字符集--> <meta charset="UTF-8"> <!--标题--> <title>注册</title> <!--

安卓点击左右切换页面Fragement

做一个简单的点击左右切换页面,下次再发一个点击后底部图标也会切换和文字也会变换颜色的 只是发教程,所以就用eclipse写,没用AS 代码如下 MainActivity.java package cn.wuxiaocheng.fragment; import android.app.Activity; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.os.Bund

H5 页面在微信端的分享

微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 一.获取基本信息 找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp.noncestr和signature. 二.实现 1.页面引入JS-SDK文件 通过scri

H5页面在微信端的分享

微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 一.获取基本信息 找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp.noncestr和signature. 二.实现 1.页面引入JS-SDK文件 通过scrip

使用 FineUI 制作简单的购物车页面(源代码免费下载,另附 24 张专业版截图)

起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多的AJAX请求而影响用户体验. 最终效果 准备数据 在生成页面之前,我们需要准备购物车的数据,这里只是简单的用表格来模拟数据: 1 protected DataTable GetCartDataTable() 2 { 3 DataTable table = new DataTable(); 4 ta