React Native之旅04－控件ToolbarAndroid

2079 查看

1、ToolbarAndroid

ToolbarAndroid是一个包装了仅限Android平台的工具栏(Toolbar)部件的React组件。一个Toolbar可以显示一个徽标，一个导航图标（譬如汉堡形状的菜单按钮），一个标题与副标题，以及一个功能列表。标题和副标题会在中间显示，徽标和导航图标会在左侧显示，而功能列表则在右侧显示。

ToolbarAndroid的用法

title标题
titleColor标题颜色
subtitle子标题
subtitleColor子标题的颜色
logo可以是任意一张本地或者网络图片，网络图片只应该在开发版本的时候使用，正式开发和发布正式版本的时候是有本地图片会自动帮你打包好，所以这里就用本地图片就好。
navIcon为导航的icon
onIconClicked当导航图标被选中的时候调用此回调
action包含
[{title:string,icon:optionalImageSource,show:enum('always', 'ifRoom', 'never'), showWithText: bool}]
设置功能菜单中的可用功能。他们会显示为部件右侧的图标或文字。如果放不下，则会被放进一个弹出菜单里。这个属性接受一个对象数组，每个对象可以有如下的字段：
title: 必须的, 功能的标题
icon: 这个功能的图标，例如require('./some_icon')
show: 是直接作为icon显示还是先隐藏，而在弹出菜单里显示；always总是显示；ifRoom如果放的下则显示；或者never从不显示。
showWithText: 值为布尔类型，指定是否在图标旁边同时还显示文字

以下是ToolbarAndroid的用法的简单示例：

只有logo和title的ToolbarAndroid

<ToolbarAndroid
    logo={require('./react_native_logo.png')}
    title="首页"
    style={{height:56,backgroundColor:'#ffffff'}}>
</ToolbarAndroid>

有navIcon和action的ToolbarAndroid

<ToolbarAndroid
    navIcon={require('./ic_back.png')}
    title="子页"
    style={{height:56,backgroundColor:'#ffffff'}}
    actions={[{title: '关闭', show: 'never'}]}
    onActionSelected={this.onActionSelected}
    onIconClicked={this._onPressButton}
/>

ToolbarAndroid差不多就这么多，文中可能会有错误或不规范的低档欢迎留言或私信通知我，谢谢

续前篇Navigator的传值

下面是我的一些个人理解和写法，下图是论坛上的一张说明图，借用一下

论坛上的一张图

通过navigator.push携带一个params，params 其实来自于<Navigator 里的一个方法的参数...

return <Component  
        {...route.params} 
        title={route.title}
        navigator={navigator} 
/>

_onPressButton: function () {
    var _this = this;
    this.props.navigator.push({
        component: Next,
//这里多出了一个 params 其实来自于<Navigator 里的一个方法的参数...
        params: {
            id: this.state.id,
        }
    });
},

在第二个页面接收前面页面传过来的id

etInitialState: function() {
    return {
        id: null
    };
},
componentDidMount: function() {
    //这里获取从FirstPageComponent传递过来的参数: id
    this.setState({
        id: this.props.id
    });
},

//在Text中显示出来
<View style={styles.content}>
    <Text>获得的参数: id={ this.state.id }</Text>
    <TouchableHighlight onPress={this._onPressButton}>
        <Text style={styles.text}>点我跳回去</Text>
    </TouchableHighlight>
</View>

这是正常的跳转传值，还有一种跳转之后返回到上一个页面传值的情况。但是navigator.pop()并没有提供参数，因为pop()只是从 [路由1,路由2，路由3。。。]里把最后一个路由踢出去的操作，并不支持传递参数给倒数第二个路由。
这里可以在第一个页面把方法或者回调传到第二个页面，然后在第二个页面操作第一个页面的state
一个查询用户信息的小例子，在第一个页面传一个id过来，在第二个页面找到这个id的用户信息，并且返回给上一个页面。

传id给第二个页面，并且把getUser的方法也传过去

_onPressButton: function () {
    var _this = this;
    this.props.navigator.push({
        component: Next,
        params: {
            id: this.state.id,
            //从SecondPageComponent获取user
            getUser: function (user) {
                _this.setState({
                    user: user
                })
            }
        }
    });
},

第二个页面获取id和之前一样
点击返回的时候把第一个页面的state的getUser的用户信息传入

USER_MODELS = {
    1: { name: '张三', age: 23 },
    2: { name: '李四', age: 24 },
    3: { name: '王五', age: 25 }
};

_onPressButton: function () {
    if(this.props.getUser) {
        var user = USER_MODELS[this.props.id];
        this.props.getUser(user);
    }
    this.props.navigator.pop();
},

最后附上效果图

第一个页面

第二个页面

传值回第一个页面

关于Navigator点击查看详细Navigator有关用法。

上一篇文章地址

最后附上下载地址:提取密码: ck6w

欢迎留言或私信交流，谢谢

转载请注明转载地址：http://www.jianshu.com/p/ec4069314395
React Native之旅04－控件ToolbarAndroid