如何在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
  },
}