Question

在ViewPager的子页面中访问this.props.navigation.navigate时遇到了一些麻烦。我在一个页面上有一个名为“详细信息”的按钮，单击该按钮后应打开一个新的单独视图（如新的Intent活动）。

结构为：登录页面->点击“登录”按钮->打开具有自定义CustomBottomNavigationBar的MainPage，该页面带有ViewPager组件，该组件接受{Object}的5个不同页面并呈现为：

在根App.js中，我已经定义了以下配置：

// App.js

import MainPage from './views/mainpage';
import PageOne from './views/pageoneview';
import PageTwo from './views/pagetwoview';
import PageOneDetailView from './views/PageOneDetailView';

const MainNavigator = createStackNavigator({
  Home: {screen: MainPage},
  PageOne: {screen: PageOne},
  PageTwo: {screen: PageTwo},
  PageOneDetailView: {screen: PageOneDetailView}
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 });

// mainpage.js


import React, { Component } from 'react';
import { 
    StyleSheet,
    Image,
    View,
    TouchableOpacity,
    ToastAndroid
} from 'react-native';
import PageOne from './homepages/pageoneview';
import PageTwo from './homepages/pagetwoview';
import CustomBottomNavigationBar from './../components/CustomBottomNavigationBar';

export default MainPage extends Component {

constructor(props) {
  super(props);
}

screens = () => {
  return {
    p1: {page: <PageOne/>},
    p2: {page: <PageTwo/>}
  }
}

render() {
        return (
            <CustomBottomNavigationBar
                screensets={this.screens()}
            />
        );
    }
}

现在PageOne.js中有一个名为“详细信息”的按钮，在点击时，它必须打开一个新的PageOneDetail.js

// pageoneview.js


import React, { Component } from 'react';
import { 
    StyleSheet,
    Image,
    View,
    TouchableOpacity,
    ToastAndroid
} from 'react-native';
import PageOneDetail from './homepages/PageOneDetailView';

export default PageOne extends Component {

constructor(props) {
  super(props);
}

OpenView = (navigateObject, whichScreen) => {
        navigateObject(whichScreen);
}

render() {
  const {navigate} = this.props.navigation;

        return (
            <View style={{ flex: 1, alignSelf: 'flex-end' }}>
              <TouchableOpacity onPress={() => this.OpenView(navigate, 'PageOneDetailView')}>
                <Text> Details </Text>
              </TouchableOpacity>
            </View>
        );
    }
}

当我登陆MainPage时遇到的错误是：undefined is not an object this.props.navigation.navigate，当mainpage.js尝试加载pageoneview.js时

请帮助我了解如何解决我整天面临的问题。

谢谢。

Answer 1

navigation道具仅可用于屏幕，而不能用于这些屏幕的子屏幕。您可以从父级传递导航，也可以使用withNavigation的{{1}} HOC或useNavigation钩子在任何地方访问它。

无法将this.props.navigation传递到子组件

1 个答案: