Question

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

当前，我有此代码

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之外添加其他元素，但是尝试此操作时，我的应用程序永远不会加载（我只看到空白的空白屏幕）。

Answer 1

您可能会看到以下内容：react-native-webview-bridge

Answer 2

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,
  },
});

我可以在网页视图中添加按钮以获得其他功能吗？

2 个答案: