我可以在我的 web 视图中添加一个按钮以获得附加功能吗？答案

【问题标题】：Can I add a button to my webview for additional functionality?我可以在我的 web 视图中添加一个按钮以获得附加功能吗？
【发布时间】：2018-12-14 14:06:43
【问题描述】：

我正在设计一个移动应用程序来与我们已经建立并运行的网站一起使用。但是，我们希望在电话上利用一些东西。例如，使用相机将照片上传到网站。

目前，我有这个代码

export default class App extends Component<Props> {
  render() {
    return (
        <WebView
             source={{uri: "https://example.com"}}
         />
    );
  }
}

有没有办法添加一个按钮，让用户打开一个单独存在于应用程序上的选项菜单（并且与 web 视图中的站点分开）。

我试过类似的东西

export default class App extends Component<Props> {
  render() {
    return (
        <View>
        <Text>Test</Text>
        <WebView
             source={{uri: "https://example.com"}}
         />
        </View>
    );
  }
}

只是作为一个测试，看看我是否可以在 webview 之外添加其他元素，但是当我尝试这个时，我的应用程序永远不会加载（我只是看到一个空白屏幕）。

【问题讨论】：

标签： android react-native webview

【解决方案1】：

Test 和 WebView 不会出现在您的示例代码中的原因是因为 View 没有定义的高度，您可以使用 flex:1 给它整个屏幕。请参阅此工作示例： https://snack.expo.io/@cgomezmendez/vengeful-tortillas

import * as React from 'react';
import { Text, View, StyleSheet, WebView } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Test</Text>
        <WebView
             source={{uri: "https://google.com"}}
         />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

【讨论】：

所以我从我的模拟器中看到需要安装 expo 的错误。我查看了 expo 安装说明，它说我不需要在我的模拟器上安装 expo，因为 expo-cli 会为我做这件事。但即使在我的机器上安装了 expo-cli 后它仍然无法正常工作。我也想知道这是否意味着我的用户需要在他们的设备上安装 expo 才能使用该应用程序？
我在编辑中删除了世博会参考资料，因为它们与问题无关，只会造成混乱。
是的，没错，我只是把它留在那里，因为它在空的snack.expo.io项目中。

【解决方案2】：

你可以看看这个：react-native-webview-bridge

【讨论】：

我得到了这个工作，但它在我自己的应用程序之外打开了 webview。我想要在我的应用程序中工作的东西。