Question

我真的无法让我的导航工作。我正在使用react-navigation（StackNavigator）。

我的导航工作在HomeScreen.js：我从HomeScreen.js导航到NewScreen.js没问题。

App.js：

import React from 'react';
import {
    StatusBar, AppRegistry
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {HomeScreen} from './screens/HomeScreen';
import AboutScreen from "./screens/AboutScreen";
import NewScreen from "./screens/NewScreen";
import CalendarScreen from "./screens/CalendarScreen";
import AddAgendaScreen from "./screens/AddAgendaScreen";

const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    About: {screen: AboutScreen},
    New: {screen: NewScreen},
    Calendar: {screen: CalendarScreen},
    AddAgenda: {screen: AddAgendaScreen}
});

console.disableYellowBox = true;
StatusBar.setHidden(true);
export default SimpleApp; // Export root navigator as the root component

Homescreen.js（工作）：

export class HomeScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    const {state, navigate} = navigation;
    return {
      title: 'eXopera'
    };
  };

  constructor() {
    super();
    this.state = {
      address: [],
      refreshing: false,
      page: 1,
      lastPage: 1,
      loading: true,
      listOpacity: 0,
    };
  }

  render() {   
    return (
      <ScrollableTabView style={{backgroundColor: '#fff'}} renderTabBar={() => <DefaultTabBar  />}>
        <View style={{flex: 1, backgroundColor: '#fff'}} tabLabel="Adressen">
          <Button color="#33cd5f" title="NEW"
            onPress={() => this.props.navigation.navigate('New') }/>
        </View>
      </ScrollableTabView>
    );
  }
}

然后有另一个名为CalendarScreen.js的组件（我也尝试导航到NewScreen.js），即使我完全复制并粘贴HomeScreen.js中的代码，我也无法导航。它总是给我“ undefined不是一个对象（评估'_this2.props.navigation.navigate'）”。

我真的不知道我现在能做些什么。几个小时以来一直在努力。

提前致谢！

Answer 1

除了反应导航之外，我还使用了react-native-scrollable-tab-view。

我通过选项卡导航传递导航道具解决了这个问题：

override func viewDidLoad() { super.viewDidLoad() self.view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(tap))) } func tap(sender: UITapGestureRecognizer){ print("tapped") view.endEditing(true) }

然后您也可以在其他组件中访问<CalendarScreen navigation={this.props.navigation} tabLabel="Agenda"/>。

Answer 2

我将方法从renderHeader(){ ... }更改为

renderHeader = () => {
    const title= 'Sign Up';
    return (
      <View style={{
        padding: 20,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}>
        <Icon
          onPress={() => {
                           this.props.navigation.navigate('find');
                         }
                  }
          name='arrow-back'
          type='MaterialIcons'
          color='white'
        />
      </View>
    );
}

它解决了这个问题。

使用renderHeader =（）=> {}而不是使用renderHeader（）{}对于解决我的问题至关重要。

Answer 3

听起来您的新屏幕未在应用导航器中注册，因此没有navigation道具。你的构造函数应该是这样的：

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  New: { screen: NewScreen }, // Add this
});

Answer 4

我正在使用替换并将其更改为导航，然后它就开始工作了。

Answer 5

人没有给出正确的答案，主要是您需要授予权限才能访问props子组件。 slution => Access the navigation prop from any component

undefined不是一个对象（评估'_this2.props.navigation.navigate'） - React Native

5 个答案: