导航能滑动切换可是不能点击切换



  • 新手,刚开始学习···
    模拟器界面是这样
    点击下面两个导航按钮没有反应
    如果滑动的话是可以切换页面的
    求助啊求助
    0_1517023596041_image.png
    0_1517023662496_image.png
    代码如下
    import React,{Component} from 'react';
    import {
    AppRegistry,
    StyleSheet,
    Button,
    Text,
    View,
    Image,
    StatusBar
    } from 'react-native';
    import { TabNavigator } from 'react-navigation';

    // const HomeScreen = () => (
    // <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    // <Text>Home Screen</Text>
    // </View>
    // );

    class HomeScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: '博客',
    tabBarIcon: ({ focused, tintColor }) => (
    <Image
    source={focused ? require('./images/ic_hot_home.png') : require('./images/ic_find_hot.png')}
    style={{ width: 26, height: 26, tintColor: tintColor }}
    />
    )
    };
    render() {
    return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>博客文章</Text>
    </View>
    );
    }
    }

    class ProfileScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: '我',
    tabBarIcon: ({ focused, tintColor }) => (
    <Image
    source={focused ? require('./images/ic_hot_home.png') : require('./images/ic_find_hot.png')}
    style={{ width: 26, height: 26, tintColor: tintColor }}
    />
    )
    };
    render() {
    return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>个人界面</Text>
    </View>
    );
    }
    }

    const RootTabs = TabNavigator(
    {
    Home: {
    screen: HomeScreen,

    },
    ProfileScreen: {
      screen: ProfileScreen,
    },
    

    },
    {
    tabBarOptions: {
    activeTintColor: '#4BC1D2',
    inactiveTintColor: '#000',
    showIcon: true,
    showLabel: true,
    upperCaseLabel: false,
    pressColor: '#823453',
    pressOpacity: 0.8,
    style: {
    backgroundColor: '#fff',
    paddingBottom: 0,
    borderTopWidth: 0.5,
    borderTopColor: '#ccc',
    },
    labelStyle: {
    fontSize: 12,
    margin: 1
    },
    indicatorStyle: { height: 0 },
    },
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: false,
    lazy: true,
    backBehavior: 'none',
    });

    export default RootTabs;



  • react-navigation 升级一下版本试试