RN综合演练（TabBarIOS、NavigatorIOS）

最新推荐文章于 2020-11-29 21:01:10 发布
最新推荐文章于 2020-11-29 21:01:10 发布
阅读量1.7k 收藏
点赞数
文章标签： React-Native TabBarIOS NavigatorIOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/callzjy/article/details/53741583
版权

index.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

var Main = require('./Components/TGMain');

export default class TGNews extends Component {
  render() {
    return (
        <Main />
    );
  }
}

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


TGMain.js

/**
 * Created by targetcloud on 2016/12/19.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
    NavigatorIOS
} from 'react-native';

var Home = require('../Components/TGHome');
var Find = require('../Components/TGFind');
var Message = require('../Components/TGMessage');
var Mine = require('../Components/TGMine');

var Main = React.createClass({
    getInitialState(){
        return{
            selectedItem: 'home'
        }
    },

    render() {
        return (
            <TabBarIOS tintColor = "orange">
                <TabBarIOS.Item
                    icon= {require('image!tabbar_home')}
                    title="首页"
                    selected={this.state.selectedItem == 'home'}
                    onPress={()=>{this.setState({selectedItem: 'home'})}}
                >

                    <NavigatorIOS
                        tintColor = "orange"
                        style={{flex:1}}
                        initialRoute = {
                        {
                            component: Home,
                            title:'网易',
                            leftButtonIcon:require('image!navigationbar_friendattention'),
                            rightButtonIcon:require('image!navigationbar_pop')
                        }
                        }
                    />

                </TabBarIOS.Item>

                <TabBarIOS.Item
                    icon= {require('image!tabbar_discover')}
                    title="发现"
                    selected={this.state.selectedItem == 'discover'}
                    onPress={()=>{this.setState({selectedItem: 'discover'})}}
                >
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute = {
                        {
                            component: Find,
                            title:'发现'
                        }
                        }
                    />

                </TabBarIOS.Item>

                <TabBarIOS.Item
                    icon= {require('image!tabbar_message_center')}
                    title="消息"
                    selected={this.state.selectedItem == 'message'}
                    onPress={()=>{this.setState({selectedItem: 'message'})}}
                >
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute = {
                        {
                            component: Message,
                            title:'消息'
                        }
                        }
                    />

                </TabBarIOS.Item>

                <TabBarIOS.Item
                    icon= {require('image!tabbar_profile')}
                    title="我的"
                    selected={this.state.selectedItem == 'profile'}
                    onPress={()=>{this.setState({selectedItem: 'profile'})}}
                >
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute = {
                        {
                            component: Mine,
                            title:'我的'
                        }
                        }
                    />

                </TabBarIOS.Item>
            </TabBarIOS>
        );
    }
});

module.exports = Main;


TGHome.js

/**
 * Created by targetcloud on 2016/12/19.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity
} from 'react-native';

var localdatas = require('../localdatas.json');
var ScrollImage = require('../Components/TGScrollImage');
var Detail = require('../Components/TGDetail');
var Dimensions = require('Dimensions');
var ScreenW = Dimensions.get('window').width;

var Home = React.createClass({
    getDefaultProps(){
        return {
            url_api: "http://c.m.163.com/nc/auto/list/5YWo5Zu9/0-20.html"
        }
    },

    getInitialState(){
        return {
            headerDs: [],
            listDs: new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2
            })
        }
    },

    render() {
        return (
            <ListView
                dataSource={this.state.listDs}
                renderRow={this.renderRow}
                renderHeader={this.renderHeader}
            />
        );
    },

    renderRow(row){
        return(
            <TouchableOpacity activeOpacity={0.5} onPress={()=>{this.pushToDetail(row)}}>
                <View style={styles.cellViewStyle}>
                    <Image source={{uri:row.imgsrc}} style={styles.imgStyle}/>
                    <View style={styles.rightViewStyle}>
                        <Text style={styles.titleStyle}>{row.title}</Text>
                        <Text style={styles.subTitleStyle}>{row.digest}</Text>
                        <Text style={styles.replyTitleStyle}>{row.replyCount}跟帖</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    },

    pushToDetail(row){
        this.props.navigator.push({
            component: Detail,
            title: row.title,
            passProps:{row}
        })
    },

    renderHeader(){
        if (this.state.headerDs.length == 0) return;
        return(
            <ScrollImage imageDs = {this.state.headerDs}/>
        );
    },

    componentDidMount(){
        fetch(this.props.url_api)
            .then((response)=>response.json())
            .then((responseData)=>{
                var jsonData = responseData['list'];
                this.dealWithData(jsonData);
            })
            .catch((error)=>{
                if(error){
                    var jsonData = localdatas['list'];
                    this.dealWithData(jsonData)
                }
            })
    },

    dealWithData(jsonData){
        var headerArr = [], listDataArr = [];
        for(var i=0; i<jsonData.length; i++){
            var data = jsonData[i];
            if(data.hasAD == 1){
                headerArr = data.ads;
                headerArr.push(data)
            }else{
                listDataArr.push(data);
            }
        }
        this.setState({
            headerDs: headerArr,
            listDs: this.state.listDs.cloneWithRows(listDataArr)
        });
    }
});

const styles = StyleSheet.create({
    cellViewStyle:{
        flexDirection:'row',
        padding:8,
        borderBottomColor:'#A8A8A8',
        borderBottomWidth:0.2
    },
    imgStyle:{
        width:100,
        height:100
    },
    rightViewStyle:{
        width: ScreenW-124,
        marginLeft:8
    },
    titleStyle:{
        fontSize:14,
        color:'#2B2B2B',
        marginBottom:4
    },
    subTitleStyle:{
        fontSize:11,
        color:'#6B6B6B',
    },
    replyTitleStyle:{
        position:'absolute',
        right:4,
        bottom:0,
        borderWidth:0.5,
        borderColor:'gray',
        borderRadius:4,
        padding:2,
        backgroundColor:'#EDEDED',
        color:'gray'
    }
});

module.exports = Home;

//http://www.114la.com/other/rgb.htm
//http://localhost:8081/debugger-ui


TGFind.js

/**
 * Created by targetcloud on 2016/12/19.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

var Find = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    发现
                </Text>
            </View>
        );
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

module.exports = Find;


TGMessage.js

/**
 * Created by targetcloud on 2016/12/19.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

var Message = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    消息
                </Text>
            </View>
        );
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

module.exports = Message;


TGMine.js

/**
 * Created by targetcloud on 2016/12/19.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

var Mine = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    我的
                </Text>
            </View>
        );
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

module.exports = Mine;


TGDetail.js

/**
 * Created by targetcloud on 2016/12/19.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView
} from 'react-native';

var Detail = React.createClass({
    getInitialState(){
        return{
            detailData: ''
        }
    },

    render() {
        return (
            <WebView
                automaticallyAdjustContentInsets={true}
                //style={styles.webView}
                source={{html: this.state.detailData, baseUrl: ''}}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                startInLoadingState={true}
                scalesPageToFit={this.state.scalesPageToFit}
            />
        );
    },

    componentDidMount(){
        var url_api = 'http://c.m.163.com/nc/article/'+this.props.row.docid+'/full.html';
        console.log(url_api);
        fetch(url_api)
            .then((response) => response.json())
            .then((responseData)=>{
                console.log(responseData);
                var allData = responseData[this.props.row.docid];
                var bodyHtml = allData['body'];
                if(allData['img'].length > 0){
                    for(var i=0; i<allData['img'].length; i++){
                        var img = allData['img'][i];
                        var imgSrc = img['src'];
                        var  imgHtml = '<img src="' + imgSrc + '" width="100%">';
                        bodyHtml = bodyHtml.replace(img['ref'], imgHtml);
                    }
                }
                this.setState({
                    detailData:bodyHtml
                });
            })
            .catch((error) => {
                alert('请求数据失败');
            })
    }
});

module.exports = Detail;


TGScrollImage.js

/**
 * Created by targetcloud on 2016/12/19.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
var TimerMixin = require('react-timer-mixin');

var ScrollImage = React.createClass({
    mixins: [TimerMixin],
    getDefaultProps(){
        return{
            scrollDuration: 2000,
            imageHeight: 180,
            imageDs: []
        }
    },
    getInitialState(){
        return{
            currentPageIndex: 0,
            title:this.props.imageDs[0].title
        }
    },
    componentDidMount(){
        this.startTimer();
    },
    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    ref="scrollViewRef"
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}
                    onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
                    onScrollBeginDrag={this.onScrollBeginDrag}
                    onScrollEndDrag={this.onScrollEndDrag}>
                    {this.renderAllImage()}
                </ScrollView>

                <Text style={styles.tipStyle}>
{this.state.title}</Text>
                <View style={styles.pageViewStyle}>
                    <View style={{flexDirection:"row"}}>{this.renderPageCircle()}</View>
                </View>
            </View>
        );
    },
    renderAllImage(){
        var allImage = [];
        var imgsArr = this.props.imageDs;
        for(var i=0; i<imgsArr.length; i++){
            allImage.push(
                <Image key={i} source={{uri: imgsArr[i].imgsrc}} style={{width:width, height:this.props.imageHeight,resizeMode:Image.resizeMode.stretch}}/>
            );
        }
        return allImage;
    },
    renderPageCircle(){
        var indicatorArr = [];
        var style;
        var imgsArr = this.props.imageDs;
        for(var i=0; i<imgsArr.length; i++){
            style = (i==this.state.currentPageIndex) ? {color:'orange'} : {color:'white'};
            indicatorArr.push(
                <Text key={i} style={[{fontSize:18},style]}>•</Text>
            );
        }
        return indicatorArr;
    },
    onScrollBeginDrag(){
        this.clearInterval(this.timer);
    },
    onScrollEndDrag(){
        this.startTimer();
    },
    onAnimationEnd(e){
        var offSetX = e.nativeEvent.contentOffset.x;
        var activePage = Math.floor(offSetX / width);
        this.setState({
            currentPageIndex: activePage,
            title: this.props.imageDs[activePage].title
        });
    },
    startTimer(){
        var scrollViewRef = this.refs.scrollViewRef;
        var imgCount = this.props.imageDs.length;
        this.timer = this.setInterval(function () {
            var activePage = (this.state.currentPageIndex+1) >= imgCount ? 0 :this.state.currentPageIndex+1;
            this.setState({
                currentPageIndex: activePage,
                title:this.props.imageDs[activePage].title
            });
            scrollViewRef.scrollResponderScrollTo({x:activePage * width, y:0, animated:true});
        }, this.props.scrollDuration);
    },
});

const styles = StyleSheet.create({
    tipStyle:{
        width:width,
        backgroundColor:'rgba(0,0,0,0)',
        position:'absolute',
        bottom:2,
        fontSize: 14,
        color: '#FFFFFF'
    },
    pageViewStyle:{
        width:width,
        height:20,
        backgroundColor:'rgba(0,0,0,0.3)',
        position:'absolute',
        bottom:0,
        flexDirection:'row',
        justifyContent:'flex-end',
        alignItems:'flex-end'
    }
});

module.exports = ScrollImage;











cloudtarget
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS_Nav与tabbar混合使用
w582324909的博客
02-26 1887
nav与tabbar混合使用，这种节目应用范围很广的，比如网易云音乐的首页节目：既有底部的tabbar又有导航栏，而且各个导航栏界面相互独立。这个界面实现起来也不算复杂，下面就介绍一种通用的写法：在AppDelegate.m中：- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDict...
TabBarIOS，TabBarIOS.Item
韩万杰的博客
03-30 1348
import React,{Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, TabBarIOS, AlertIOS,} from 'react-native'; var one = 'https://img.alicdn.com/imgextra/i1/222
React-Native组件之 TabBarIOS和TabBarIOS.Item
xiangzhihong8的专栏
05-14 1322
TabBarIOS 组件简介目前的APP内，大部分都是选项与选项之间切换，比如：微信、微博、QQ空间…，在iOS中，我们可以通过TabItem类进行实现，那么，在React Native中，我们可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件不支持Android，当然后面我们会通过自定义该组件来满足实际开发需求。TabBarI
ReactNative中TabBarIOS
骑驴找马追骆驼_so的博客
01-09 851
在React Native中可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件是不支持Android的，当然后面我们可以自定义该组件TabBarIOS常见的属性 View的所有属性都可以被继承 barTintColor： 设置tab条的背景颜色 tintColor：设置tab条上被选中图标的颜色 translucent ：boo
React Native之Android Tabbar的实现.（ios 为TabBarIOS
weixin_34301132的博客
02-24 87
2019独角兽企业重金招聘Python工程师标准>>> ...
RN2026 demo 程序
09-27
RN2026是一款专为物联网(IoT)设计的无线微控制器单元(MCU)，集成了Wi-Fi和蓝牙低功耗(BLE)功能，适用于各种智能设备和连接应用。RN2026 Demo程序是瑞昱(Reltek)公司提供的一个示例代码，帮助开发者快速理解和上手RN...
RN8302应用笔记.doc
06-04
锐能微RN8302/RN7302是一款专用于三相多功能电表设计的高精度计量芯片。这款芯片在电力计量领域具有广泛的应用，因为它提供了完整的硬件设计指导和可靠的软件设计方案，确保了电表的精确度和稳定性。 在硬件设计...
RN8302、RN8302B
08-16
RN8302和RN8302B是微控制器，通常用于电力系统中的智能电表和能源管理系统。这些芯片由瑞萨电子公司制造，专为三相电力计量设计，提供高精度的电能测量和通信功能。在深入探讨RN8302和RN8302B的知识点之前，让我们先...
111.rar_RN8209C程序
07-15
标题中的“111.rar_RN8209C程序”表明这是一个与RN8209C相关的程序，被存放在一个名为“111.rar”的压缩文件中。RAR是一种常见的压缩格式，用于将多个文件打包成一个单一的可下载单元，便于存储和传输。RN8209C可能...
RN6752V1 datasheet, 源码
最新发布
09-13
RN6752V1是一款在Allwinner平台上用于无线连接的芯片，主要应用于Linux系统中的驱动开发。在本文中，我们将深入探讨RN6752V1的数据手册（datasheet）以及与其相关的源码，了解如何在Allwinner平台上进行驱动程序的...
React Native中TabBarIOS的简单使用方法示例
11-29
前言 大家应该都知道，TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法，话不多说了，来一起看看详细的介绍吧。 首先看一下效果图,如下图所示: 效果图 看完效果图再对代码进行说明. import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, TouchableHighlight, Platform, } from 'react
ReactNative的Tabbar组件
08-10
React-Native的 Tabbar 组件
使用react-native-tab-navigator,push之后隐藏tabbar
02-20
使用react-native-tab-navigator,push之后隐藏tabbar 详见:http://www.cnblogs.com/shaoting/p/5934725.html
React Native－7.React Native NavigatorIOS组件详解
王学森的专栏
02-01 4396
老样子，先上图： 图也看了，先听老王给你讲讲政治课NavigatorIOS 是RN中的一个组件既然是一个组件，那么他就有一堆属性来完成不同的需求：属性讲解 barTintColor : 导航条的背景颜色 initalRoute : 在RN 中导航名为“路由”（学过网络的应该明白这个词的意思）, 作用就是指路的，大家可以这么理解，这个属性是一个方法，用来初始化导航的。 itemWrapperS
RN填坑-----tabBarIOS的icon和selectedIcon设置后无效
chevins的博客
05-24 5714
现在网上的可学习资料包括一些书的可学习资料在关于设置tabBarIOS这个组件的图标和选中图标时都是直接这样告诉你的 <TabBarIOS.Item title = "我的" icon = {require('image!icon_tabbar_mine')} selectedIcon = {requi
React-native开发系列（一）---NavigatorIOS应用
总有一天浪迹天涯的博客
06-12 987
React-native开发系列（一）---NavigatorIOS应用,从此不需要看复杂的教程！
RN实现tabbar
【03】的博客
11-29 521
组件准备 @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-vector-icons/Ionicons 核心代码 import React, {Component} from 'react'; import {NavigationContainer} from "@react-navigation/native"; import {createStackNavigator
RN: react-native和小程序实现tabBar
qq_36413371的博客
07-30 209
一：react-native 0) 效果 1）环境配置 javac > yarn -v > git --version > python > rn配置安卓环境 2) 打包流程 npm install -g react-native-cli >adb devices ...
RN8209C/RN8209D电能计量芯片中文手册
"RN8209C/RN8209D是Renergy系列的单相多功能防窃电专用计量芯片，由深圳市锐能微科技有限公司开发。该芯片适用于智能电表应用，具备高精度电能计量、防窃电功能，并支持多种扩展功能。手册内容包括了芯片的功能描述...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值