ReactNavigation 5.0 浏览器下一个/上一个按钮未启用

Question

我使用React Native for Web 创建了一个项目，它在移动设备上运行良好，但是当我进入网络时，它没有启用浏览器默认的下一个上一个按钮。

如何启用浏览器按钮并在浏览器中管理下一个上一个

//在新项目中的App.js中

import * as React from 'react';
import { View, Text,Button,Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const isWeb = Platform.OS === 'web';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => linkTo('/Details')} title="Go to Details Screen" />
    </View>
  );
}


function Details() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text style={{fontWeight:'100',fontSize:30}}>Detail's Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {

  return (
    
    <NavigationContainer>
   
      <Stack.Navigator initialRouteName="HomeScreen">
        <Stack.Screen name="HomeScreen" component={HomeScreen} options={{ headerShown: !isWeb}} />
        <Stack.Screen name="Setting" component={Setting} options={{headerShown:!isWeb}}/>
        <Stack.Screen name="Details" component={Details} options={{headerShown:!isWeb}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Answer 1

我认为您必须使用作为主屏幕参数一部分的“导航”对象。看看下面的代码

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.navigate('Details');} />
    </View>
  );
}