Reactnative React Navigation—从标题按钮打开模式

因为"ScreenModal"不是"NavigationContainer"中的屏幕，所以它不会收到"导航"props .您可以使用"use导航"挂钩来访问它.

const navigation = useNavigation()

但这不会工作无论如何，因为ScreenModal不是一个屏幕，所以它不能导航到任何地方，除非你有定义它的其他地方.

另外，REACTION 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>
  );
}

希望这能有所帮助