1.)创建世博项目

expo init rnwebviewnav

2.)从react导航安装expo react导航

npx expo install react-native-screens react-native-safe-area-context

3.)安装webview与博览会

expo install react-native-webview

4.)创建一个名为src的文件夹（源代码），并添加您的文件。对我来说，我添加了2个文件，像这样

5.)确保你的package.json看起来像这样（或者有这些组件作为依赖）

6.)确保您的App.js如下所示

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import WebViewPage from "./src/WebViewPage";
import ButtonPage from "./src/ButtonPage";

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ButtonPage"
          component={ButtonPage}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="WebViewPage"
          component={WebViewPage}
          options={{ title: "Webview Page" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

7.)确保导航到Webview的页面如下所示

• 按钮页码 *

import { Button, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native';

const ButtonPage = () => {
    const navigation = useNavigation();

    const navigateToWebView = () =>{
        navigation.navigate('WebViewPage');
    }

  return (
    <View style={{flex:1, justifyContent:'center'}}>
      <Text>ButtonPage</Text>
      <Button onPress={navigateToWebView} title="Click to Navigate" color="#841584" />
    </View>
  )
}

export default ButtonPage

const styles = StyleSheet.create({})

8.)确保您的Webview页面看起来像这样

• Web视图页 *

import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import WebView from 'react-native-webview'

const WebViewPage = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
    <WebView 
      source={{ uri: 'https://reactnative.dev/' }} 
    />
  </SafeAreaView>
  )
}

export default WebViewPage

const styles = StyleSheet.create({})

按钮页

网络视图页面

9.)在你的终端上运行npm start，看看你到目前为止做了什么！
我相信我已经回答了你的问题：）如果是，请投票赞成我的答案，如果它对你有帮助。