React 导航 - 从标题按钮打开模式

Question

我正在尝试从标题按钮打开模式视图。我使用 React Navigation v6 (https://reactnavigation.org/docs/modal/) 作为指南。

我遇到的似乎无法解决的错误是：

 ERROR  TypeError: Cannot read property 'navigate' of undefined, js engine: hermes

这是我的代码。谁能帮助我解决问题？

import Reactfrom 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Button, Modal, StyleSheet, Text, View} from 'react-native';

// Import Tab Screens
import ScreenA from './src/pages/screenA'
import ScreenB from './src/pages/screenB'
import ScreenC from './src/pages/screenC'

const Tab = createBottomTabNavigator();

function ScreenModal({ navigation }) {
  return (
    <View>
      <Text>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}

export default function App({ navigation }) {

  return (
    <NavigationContainer>
      <Tab.Navigator>
      <Tab.Group>
        <Tab.Screen name="ScreenA" component={ScreenA} />
      </Tab.Group>
      <Tab.Group>
        <Tab.Screen name="ScreenB" component={ScreenB} 
            options={{
              headerRight: () => (
                <Button
                  onPress={() => navigation.navigate('ScreenModal')}
                  title="Open Modal"
                />
              ),
            }}
          />
        </Tab.Group>
      <Tab.Group>
        <Tab.Screen name="ScreenC" component={ScreenC} />
      </Tab.Group>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

因为“ScreenModal”不是“NavigationContainer”内的屏幕，所以它不会收到“navigation”属性。您可以使用“useNavigation”挂钩来访问它。

const navigation = useNavigation()

但这无论如何都行不通，因为 ScreenModal 不是屏幕，因此无论如何都无法导航到它，除非您在其他地方定义了它。

React Native 还有一个您可能想要使用的 Modal 组件。你可以这样实现：

import { Modal } from 'react-native'

const Tab = createBottomTabNavigator();

export default function App() {
  const [showModal, setShowModal] = React.useState()

  return (
    <NavigationContainer>
      <Modal visible={showModal}>
        <View>
          <Text>This is a modal!</Text>
          <Button onPress={() => setShowModal(false)} title="Dismiss" />
        </View>
      </Modal>


      <Tab.Navigator>
      <Tab.Group>
        <Tab.Screen name="ScreenA" component={ScreenA} />
      </Tab.Group>
      <Tab.Group>
        <Tab.Screen name="ScreenB" component={ScreenB} 
            options={{
              headerRight: () => (
                <Button
                  onPress={() => setShowModal(true)}
                  title="Open Modal"
                />
              ),
            }}
          />
        </Tab.Group>
      <Tab.Group>
        <Tab.Screen name="ScreenC" component={ScreenC} />
      </Tab.Group>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

由于 Modals 将渲染在任何内容之上，因此您可以将组件添加到任何您想要的位置，因此它不需要位于根组件中。但如果您想让 ScreenModal 成为一个屏幕，那么您需要将其作为堆栈导航器中的屏幕。

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator(); //install and import this

function ScreenModal({ navigation }) {
  return (
    <View>
      <Text>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}

const HomeNavigator = ({ navigation }) =>{
  return(
    <Tab.Navigator>
      <Tab.Group>
        <Tab.Screen name="ScreenA" component={ScreenA} />
      </Tab.Group>
      <Tab.Group>
        <Tab.Screen name="ScreenB" component={ScreenB}
          options={{
            headerRight: () => (
              <Button
                onPress={() => navigation.navigate('ScreenModal')}
                title="Open Modal"
              />
            ),
          }}
        />
      </Tab.Group>
      <Tab.Group>
        <Tab.Screen name="ScreenC" component={ScreenC} />
      </Tab.Group>
    </Tab.Navigator>
  )
}

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeNavigator}/>
        <Stack.Screen name="ScreenModal" component={ScreenModal} options={{presentation:'modal'}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

希望这有帮助