RN学习-主流框架

作者: 马戏团小丑 | 来源:发表于2017-10-20 16:33 被阅读22次

RN学习-主流框架
快速学习RN之环境搭建和跑demo(一)
Flutter 原理和绘图
主流框架|非主流框架
ReadingGank（RN）开发过程
主流深度学习框架简介
Android主流框架学习之旅
Android主流框架学习资料
开启 RN 学习之旅
React—Native IOS混合开发

按iOS App主流框架就是主控制器是TabBarController，其子控制器都是UINavigationController，然后其他控制器再成为UINavigationController的子控制器

Main.js

/**
 * @providesModule Main
 */
import React, {Component} from 'react'

// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image
}from 'react-native'

import TabNavigator from 'react-native-tab-navigator';

import Discover from 'Discover'
import Park from 'Park'
import Mine from 'Mine'
import Reading from 'Reading'

export default class Main extends Component {

    constructor(props){
        super(props);

        this.state = {
            selectedIndex:0
        }
    }

    // 渲染TabBarItem
    renderTabBarItem(i,title,uri,selectedUri,component,badgeText){

        return (
            <TabNavigator.Item
                selected={this.state.selectedIndex == i}
                title={title}
                renderIcon={() => <Image source={{uri:uri}} style={styles.tabIcon}/>}
                renderSelectedIcon={() => <Image source={{uri:selectedUri}} style={styles.tabIcon}/>}
                selectedTitleStyle={{color:'rgb(56,165,157)'}}
                renderBadge={badgeText?this.renderBadge.bind(this,badgeText):null}
                onPress={()=>{
                    this.setState({
                        selectedIndex:i
                    })
                }}
            >
                {component}
            </TabNavigator.Item>
        )

    }

    // 渲染提示数字
    renderBadge(badgeText){
        return (
            <View style={styles.badgeStyle}>
                <Text style={{color:'white',fontSize:10}}>{badgeText}</Text>
            </View>
        )
    }

    render(){
        return (
            <TabNavigator>
                {/*畅读*/}
                {this.renderTabBarItem(0,'畅读','icon_tabbar_homepage','icon_tabbar_homepage_selected',<Reading
                    navigator={this.props.navigator}/>,10)}   // navigator={this.props.navigator} 要把navigator传出去，后面需要push

                {/*公园*/}
                {this.renderTabBarItem(1,'公园','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected',<Park navigator={this.props.navigator}/>)}

                {/*发现*/}
                {this.renderTabBarItem(2,'发现','icon_tabbar_misc','icon_tabbar_misc_selected',<Discover navigator={this.props.navigator}/>)}

                {/*我*/}
                {this.renderTabBarItem(3,'我','icon_tabbar_mine','icon_tabbar_mine_selected',<Mine navigator={this.props.navigator}/>)}

            </TabNavigator>
        )

    }

}
// 4.样式表 组件外观 尺寸,颜色
var styles = StyleSheet.create({
    viewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    tabIcon:{
        width:25,
        height:25
    },
    badgeStyle:{
        width:16,
        height:16,
        backgroundColor:'red',
        justifyContent:'center',
        alignItems:'center',
        borderRadius:8,
        marginTop:3

    }
})

以第一个控制器畅读为例 Reading.js

/**
 * @providesModule Reading
 */
import React, {Component} from 'react'

// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity

}from 'react-native'

import CommonNavigationBar from 'CommonNavigationBar'

import CommonHighButton from  'CommonHighButton'

import CommonSelectedButton from  'CommonSelectedButton'

// 3.自定义 程序入口组件([[UIView alloc] init])
export default class Reading extends Component {
    render(){

        return (
            <View>
                <CommonNavigationBar
                    titleView={this.renderTitleView()}
                    titleStyle={styles.titleStyle}
                    leftBarButtonItem={this.renderLeftBarButtonItem()}
                    rightBarButtonItem={this.renderRightBarButtonItem()}
                />
                <View style={{flex:1,backgroundColor:'red'}}/>
            </View>
        )

    }

    // marginLeft : justifyContent alignItems
    renderLeftBarButtonItem(){
        return (
            <CommonHighButton image='nav_item_game_icon'
                              highlightedImage='nav_item_game_click_icon'
                              highlightedTitleStyle={{color:'red'}}
                              title='按钮'
                              imageStyle={{width:15,height:15}}

            />
        )
    }


    // 渲染右边View
    renderRightBarButtonItem(){
        return (
            <CommonSelectedButton image='mine-moon-icon'
                                  imageStyle={{width:15,height:15}}
                                  selectedImage='mine-sun-icon-click'
                                  onPress={this.clickSelectButton.bind(this)}
            />
        )
    }
    // 渲染中间View
    renderTitleView(){
        return (
            <Image source={{uri:'reading'}} style={{width:54,height:37}}/>
        )
    }

    clickSelectButton(button){
        button.setState({
            selected:!button.state.selected
        })
    }
}

// 4.样式表 组件外观 尺寸,颜色
var styles = StyleSheet.create({
    viewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    titleStyle:{
        color:'white',fontSize:18
    }
})

知识点

TabNavigator:一个跨平台的TabBar组件，可以用于iOS和安卓

github：https://github.com/happypancake/react-native-tab-navigator
安装：npm install react-native-tab-navigator --save

自定义导航栏 CommonNavigationBar.js ，有左中右三部分

/**
 * @providesModule CommonNavigationBar
 *
 * 使用详情:
 * 1.如果要调整中间,左边,右边View,需要通过position调整
 */
import React, {Component,PropTypes} from 'react'

// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform
}from 'react-native'

var screenW = Dimensions.get('window').width;

// 3.自定义 程序入口组件([[UIView alloc] init])
export default class CommonNavigationBar extends Component {

    static propTypes = {
        // 标题
        title:PropTypes.string,
        titleView:PropTypes.object,

        // 左边
        leftBarButtonItem:PropTypes.object,

        // 右边
        rightBarButtonItem:PropTypes.object,

        // 样式
        titleStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]),

        barStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number])

    }

    render(){
        return (
            <View style={[styles.barStyle,this.props.barStyle]}>
                <View style={styles.contentView}>
                    {/*左边*/}
                    <View style={styles.leftView}>
                        {this.props.leftBarButtonItem}
                    </View>

                    {/*中间*/}
                    <View style={styles.middleView}>
                        {this.props.title?<Text style={this.props.titleStyle}>{this.props.title}</Text> :this.props.titleView}
                    </View>

                    {/*右边*/}
                    <View style={styles.rightView}>
                        {this.props.rightBarButtonItem}
                    </View>
                </View>
            </View>
        )

    }

}
// 4.样式表 组件外观 尺寸,颜色
var styles = StyleSheet.create({
    barStyle:{
        height:Platform.OS == 'ios'? 64 : 44,
        width:screenW,
        backgroundColor:'white',
        borderBottomWidth:2,
        borderBottomColor:'#e8e8e8'
    },
    contentView:{
        height:44,
        width:screenW,
        marginTop:Platform.OS == 'ios'? 20 : 0,
        backgroundColor:'transparent',
        flexDirection:'row'
    },
    leftView:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    middleView:{
        flex:3,
        justifyContent:'center',
        alignItems:'center'
    },
    rightView:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
})

自定义按钮有选中样式的CommonSelectedButton.js

/**
 * @providesModule CommonSelectedButton
 *
 */
import React, {Component,PropTypes} from 'react'

// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    TouchableOpacity,
    Image
}from 'react-native'

var screenW = Dimensions.get('window').width;

// 3.自定义 程序入口组件([[UIView alloc] init])
export default class CommonSelectedButton extends Component {

    static propTypes = {
        // 正常
        // 标题
        title:PropTypes.string,

        // 图片
        image:PropTypes.string,

        // 样式
        imageStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]).isRequired,
        titleStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]),
        buttonStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]),

        // 选中

        selectedTitleStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]),

        selectedImage:PropTypes.string,

        // 监听
        onPress:PropTypes.func
    };

    constructor(props){
        super(props);

        this.state = {
            selected:false
        }
    }

    render(){
        return (
            <TouchableOpacity style={[styles.buttonStyle,this.props.buttonStyle]}
                              onPress={()=>{
                                  // 执行外界传入的点击按钮方法
                                  if (this.props.onPress){
                                      this.props.onPress(this);
                                  }
                              }}
            >

                {/*标题*/}
                {this.props.title?<Text style={this.state.selected?this.props.selectedTitleStyle:this.props.titleStyle}>{this.props.title}</Text>:null}

                {/*图片*/}
                {this.props.image?<Image source={{uri:this.state.selected && this.props.selectedImage?this.props.selectedImage : this.props.image}} style={[{marginLeft:3},this.props.imageStyle]}/>:null}

            </TouchableOpacity>
        )
    }
}
// 4.样式表 组件外观 尺寸,颜色
var styles = StyleSheet.create({
    buttonStyle:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    }
});

RN学习-主流框架
按iOS App主流框架就是主控制器是TabBarController，其子控制器都是UINavigationCo...
快速学习RN之环境搭建和跑demo(一)
RN即React Native 基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,cs...
Flutter 原理和绘图
1架构理解谈到跨平台一般绕不过web、hybird、react native等框架，其中RN是目前比较主流的跨平...
主流框架|非主流框架
非主流框架搭建 UITabBarController是导航控制器的根控制器导航控制器是窗口的根控制开发中基本不...
ReadingGank（RN）开发过程
ReadingGank项目主要是通过借鉴Reading项目学习RN开发，然后遵循相关框架添加Gank的相关...
主流深度学习框架简介
Caffe Caffe是伯克利人工智能研究室维护的深度学习库。底层用c++实现支持python接口有大量的预...
Android主流框架学习之旅
缓存： DiskLruCache 图片加载： Android Universal Image Loader Pic...
Android主流框架学习资料
Android 开发小工具之：注解 Annotation 可能是东半球最全的RxJava使用场景小结 Androi...
开启 RN 学习之旅
开启RN学习之旅（一） —— 基本了解开启RN学习之旅（二） —— RN - GitHub Project
React—Native IOS混合开发
再此之前由于学习过一段时间的RN框架对于RN可以说相对有些认知在混编开始之前做了一个Demo 发现集成非常简...