reactjs - Stack Navigation Using React Native 导致 undefined is not object 错误

Question

我对本机反应非常陌生，并且正在尝试找出任何人可以提供的任何帮助/指导，将不胜感激。所以我有这个链接屏幕，我试图导航到这个例子的另一个屏幕我已经制作了一个名为试用的屏幕（不包括代码），其中只有一个简单的 flex 视图和背景。但是，我对堆栈转换的工作方式感到非常困惑。我在网上看到的所有内容都使用 props.this.navigation.navigate('') 但是我希望将堆栈导航器放在单独的 js 文件中，而不是将所有窗口放在同一个文件中。所以对于这个例子，我试图从 LinksScreen 导航到 Trial，我将添加更多窗口，所以我不想使用切换导航器。

附带说明（idk，如果这是相关的）链接屏幕已经嵌入到下面的选项卡导航器代码中：

再次感谢您提供任何可能的帮助。

屏幕：

import MyStackNavigator from '../navigation/StackNavigator';
import { createAppContainer } from 'react-navigation';

const AppContainer = createAppContainer(MyStackNavigator);

export default function LinksScreen() {

  return (
    <ScrollView style={styles.container}>

        <Button style = {styles.button}
          onPress={() => AppContainer.props.navigation.navigate('Trial')}
          title="Make a Plan"
        />

.... 剩余

堆栈导航类：

import { createStackNavigator } from 'react-navigation-stack';
import LinksScreen from '../screens/LinksScreen';
import Trial from '../screens/Trial';

const MyStackNavigator = createStackNavigator(
    {
      Trial: Trial,
      LinksScreen: LinksScreen,
    },
);

标签导航：

const LinksStack = createStackNavigator(
  {
    Links: LinksScreen,
  },
  config
);

LinksStack.navigationOptions = {
  tabBarLabel: 'Workouts',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-fitness' : 'md-fitness'} />
  ),
};

LinksStack.path = '';

.....

const tabNavigator = createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

tabNavigator.path = '';

export default tabNavigator;

主 App.js

import AppNavigator from './navigation/AppNavigator';

export default function App(props) {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={loadResourcesAsync}
        onError={handleLoadingError}
        onFinish={() => handleFinishLoading(setLoadingComplete)}
      />
    );
  } else {
    return (
      <View style={styles.container}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
        <AppNavigator />
      </View>
    );
  }
}

……

标签： reactjsreact-nativereact-navigationreact-native-navigation