如何在 react-native-webview 中添加顶部栏

Question

我有一个简单的 webview 应用程序

import * as React from "react";
import { Button } from "react-native";
import { WebView } from "react-native-webview";

export default class App extends React.Component {
  render() {
    return (
      <WebView source={{ uri: 'https://www.google.com' }} style={{ marginTop: 20 }} />
    );
  }
}

如何添加带有文本的顶栏，如下所示：

Answer 1

您可以将 WebView 包装在父视图中

import * as React from "react";
import { Button, SafeView, View, Text, StyleSheet } from "react-native";
import { WebView } from "react-native-webview";

export default class App extends React.Component {
  render() {
    return (
       <SafeView>
         <View style={styles.container}>
           <Text style={{padding: 10}}>Hello</Text>
           <WebView source={{ uri: 'https://www.google.com' }} style={{ marginTop: 20 }} />
         </View>
       </SafeView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 0,
    margin: 0
  },
}

如何在 react-native-webview 中添加顶部栏

How to add a top bar in react-native-webview

webview

react-native

expo

react-native-webview