ReactNative 进阶（二十七）：createMaterialTopTabNavigator 顶部导航组件

createMaterialTopTabNavigator(RouteConfigs,TabNavigatorConfig)

{  Home:{ //这是一个首页路由配置项    screen:Home,//必填项   Home是react的一个组件    path:'',//选填项深度连接或webAPP中起作用    navigationOptions:{//选填项      //配置项...    }  }  Detail:{ //这是一个详情页路由配置项    screen:Detail,//必填项   Detail是react的一个组件    path:'',//选填项深度连接或webAPP中起作用    navigationOptions:{//选填项      //配置项...    }  }}

//TopNavigatorComponent.jsimport {createAppContainer, createMaterialTopTabNavigator} from 'react-navigation'import TopPage1 from './TopPage1'import TopPage2 from './TopPage2'import TopPage3 from './TopPage3'import TopPage4 from './TopPage4'/** * 标签导航 */const TopTabNavigator = createMaterialTopTabNavigator({    topPage1: {        screen: TopPage1,    },    topPage2: {        screen: TopPage2,    },    topPage3: {        screen: TopPage3,    },    topPage4:{        screen:TopPage4,    }}, {    tabBarPosition: 'bottom',       //标签栏在屏幕顶部还是底部    // swipeEnabled:true,           //是否可以滑动切换标签    // backBehavior:'none',         //andorid按下返回键将返回initalRouteName，如果设置非initalRouteName则直接结束标签导航    lazy: false,                    //是否只渲染显示的标签    animationEnabled: true,         //标签切换是否有动画效果    tabBarOptions: {        activeTintColor: '#ffffff',  //标签栏激活字体颜色        inactiveTintColor: '#000000',//标签栏未激活字体颜色        showLabel: true,             //是否显示标签栏        labelStyle: {fontSize: 16},  //标签样式(可设置字体大小等)        showIcon: true,              //是否显示标签栏上图标        scrollEnabled: true,        //是否可以滚动标签栏目(当tab总数超过一屏)        indicatorStyle: {height: 1}, //指示器样式 height：0则不显示        style: {backgroundColor: '#31b3c0'}, //设置整个tabbar样式(背景颜色等)        // tabStyle:{backgroundColor:'#ffffff', height:50},//设置单个tabbar样式    }}); const appTopTabNavigation = createAppContainer(TopTabNavigator);export default appTopTabNavigation;

import PropTypes from 'prop-types';
export default class Child extends PureComponent {  static propTypes = {    onItemClick: PropTypes.func,  }    info = '子组件的内容';    itemClick(info) {     // 可以将子组件中的某个内容传出给父组件     if (this.props.onItemClick) {       this.props.onItemClick(info);     }  }    render(){      return(      <TouchableOpacity            onPress={() => { this.itemClick(this.info); }}            style={styles.touchItem}          >            <Text >              点击修改父组件内容            </Text>          </TouchableOpacity>      );  }}

export default class Father extends PureComponent {  _onItemClick(info) {    console.log('你调用了父组件的方法')    // 显示info或者用子组件传参改变父组件中的参数    console.log(info);  } render(){    return(    // _onItemClick为父组件函数定义        <Child           onItemClick={this._onItemClick}/>    ）;}