react-native导航器问题跳转问题

dengzy
  • 33

react-native导航器问题: 从底部tab(我的)页面进去 userInfo页面, 在此页面点击返回按钮返回无效 / 点击进入Detail页面也无效,感觉是导航器配置有问题,有大佬知道这是什么问题麽?? 先谢谢了

//配置 底部tab
const bottomTabNavigator = createBottomTabNavigator({
    '首页': HomeScreen,
    '分类': SortScreen,
    '购物车': CartScreen,
    '我的': MeScreen
}, {
        defaultNavigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === '首页') {
                    iconName = 'home';
                }
                if (routeName === '分类') {
                    iconName = "shopping-bag";
                }
                if (routeName === '购物车') {
                    iconName = "shopping-cart";
                }
                if (routeName === '我的') {
                    iconName = "user";
                }
                return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
            },
        }),
        tabBarPosition: 'bottom',
        tabBarOptions: {
            activeTintColor: 'red',
            inactiveTintColor: 'gray'
        },
        navigationOptions: ({navigation}) => {
            const { routeName } = navigation.state.routes[navigation.state.index];
            const headerTitle = routeName;
            return {
                headerTitle
            };
        }
    }
)


//配置 页面堆栈
const StackNavigator = createStackNavigator({
    Home: bottomTabNavigator,
    Detail: DetailScreen,
    UserInfo: UserInfoScreen
}, {
        defaultNavigationOptions: {
            headerTintColor: '#000',
            headerStyle: {
                backgroundColor: '#fff',
            },
        }
    }
);

export default App = createAppContainer(StackNavigator);

userInfo 页面

export default class Userinfo extends Component{
    static navigationOptions = {
        title: '用户中心'
    }

    _toLocation() {
        console.log(this.props.navigation);
        this.props.navigation.navigate('Detail')
    }

    render() {
        const { navigate } = this.props.navigation
        return(
            <ScrollView>
                <Button onPress={this._toLocation.bind(this)} title='点击' />
            </ScrollView>
        )
    }
}
回复
阅读 665
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏