反应导航 选项卡导航器 不渲染 下一个屏幕 ，.

Question

首先我创建了一个登录，注册，然后是主页视图(TabBar(屏幕， 在应用程序中.js我必须创建StackNavigator。

import HomeView from './AllViewController/HomeView';
import Login from './AllViewController/Login';
import Registration from './AllViewController/Registration';
import AlbumDetail from './AllViewController/AlbumDetail';
const RootStack = StackNavigator({
Home: {screen: HomeView, navigationOptions: { header: null}},
Login: {screen: Login, navigationOptions: { header: null}},
Registration: {screen: Registration, navigationOptions: { header: null}},
AlbumDetail: {screen: AlbumDetail, navigationOptions: { header: null}},

我创建的主屏幕TabNavigator我在那里显示四个屏幕相册，购物车，库，历史记录屏幕。问题来自相册屏幕，我正在尝试打开新屏幕，它不起作用
这是我的主屏幕代码

import objAlbum from '../AllViewController/Album'
import objCart from '../AllViewController/Cart'
import objLibrary from '../AllViewController/Library'
import objHistory from '../AllViewController/History'
import {TabNavigator} from 'react-navigation'
const RootStack = TabNavigator({
ClassA: { screen: objAlbum},
ClassB: { screen: objLibrary },
ClassC: { screen: objCart},
ClassD: { screen: objHistory },
})
export default class HomeView extends Component {
render() {
return <RootStack />;
}
}

从相册屏幕我正在尝试打开AlbumDetail屏幕不起作用请帮助我。

export default class Album extends Component<Props> {

constructor(props) {
super(props)
this.state = {
textInputData: "",
textInputpassword: ""
}

this.click_Next = this.click_Next.bind(this);
}

click_Next = () => {
this.props.navigation.navigate('AlbumDetail')
}

Answer 1

似乎您的两个导航器之间没有链接。

首先，您应该使用SwitchNavigator(而不是stackNavigator(作为登录屏幕。这对用户体验和以后返回到第一个状态时的代码更好。

然后你可以这样做：

import objAlbum from '../AllViewController/Album'
import objCart from '../AllViewController/Cart'
import objLibrary from '../AllViewController/Library'
import objHistory from '../AllViewController/History'
import {TabNavigator, StackNavigator} from 'react-navigation'
import Login from './AllViewController/Login';
import Registration from './AllViewController/Registration';
import AlbumDetail from './AllViewController/AlbumDetail';
const HomeView = TabNavigator({
ClassA: { screen: objAlbum},
ClassB: { screen: objLibrary },
ClassC: { screen: objCart},
ClassD: { screen: objHistory },
})
const RootStack = StackNavigator({
Home: {screen: HomeView, navigationOptions: { header: null}},
Login: {screen: Login, navigationOptions: { header: null}},
Registration: {screen: Registration, navigationOptions: { header: null}},
AlbumDetail: {screen: AlbumDetail, navigationOptions: { header: null}},