Question

首先，我创建了一个登录名，然后进行了注册，然后创建了HomeView（TabBar）屏幕，在App.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}},

反应导航TabNavigator不呈现下一个屏幕，

1 个答案: