android - 我可以在我的 webview 中添加一个按钮以获得额外的功能吗？

Question

我正在设计一款移动应用程序，以便与我们已经启动并运行的网站配合使用。但是，我们想在电话上利用一些东西。例如，使用相机将照片上传到网站。

目前，我有这段代码

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

是否有某种方法可以添加一个按钮，让用户可以打开单独存在于应用程序上的选项菜单(并且与 WebView 中的网站分开)。

我试过类似的东西

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

只是作为一个测试，看看我是否可以在 webview 之外添加其他元素，但是当我尝试这个时，我的应用程序从未加载(我只看到一个空白的白色屏幕)。

Answer 1

Test 和 WewbView 不会出现在您的示例代码中的原因是因为 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,
  },
});