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

【问题标题】：How to add a top bar in react-native-webview如何在 react-native-webview 中添加顶部栏
【发布时间】：2021-09-23 00:05:18
【问题描述】：

我有一个简单的 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 }} />
    );
  }
}

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

【问题讨论】：

标签： react-native webview expo react-native-webview

【解决方案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
  },
}

【讨论】：