Question

我正在使用 React Native for Web 并在我的应用中实现导航，但我无法使用浏览器按钮导航下一个 - 上一个，

浏览器地址栏中的网址已更改，但无法更改视图。

我已将 React-Navigation 用于网络/移动，任何人知道更好的方法请指导我

//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';

function HomeScreen({ navigation }) {

return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <View style={{ marginVertical: 20 }}>
      <Text style={{fontWeight:'100',fontSize:30}}>Home Screen</Text>
      </View>
      
      
      <Button
        title="Go to Details Screen"
        onPress={() => navigation.navigate('Details')}
      />

      <View style={ {marginVertical:20}}>
        <Button  title="Go to Setting Screen" onPress={() => navigation.navigate('Setting')} />
      </View>
    </View>
  );
}


const Stack = createStackNavigator();

function App() {

  const linking = {
    prefixes: ['myurlhere://'],
    config: {

      screens: {
        Setting: 'Setting',
        Details: 'Details',
      },
    },
  };


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

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

Answer 1

我也在研究。

但这就是我所在的地方及其工作。

    const linking = {
      prefixes: ['http://localhost:19006/', 'mychat://'],
      config: {
        screens: {
          Home: '',
          Search: '?:id/Search',
        }
      },
    };

  return (

      <AppContext.Provider value={userSettings}>
            <NavigationContainer linking={linking}>
              <StackContainer />
            </NavigationContainer>
      </AppContext.Provider>
  );

反应导航更改网址但不查看

1 个答案: