Могу ли я добавить кнопку в мой веб-просмотр для дополнительной функциональности?

Question

Я разрабатываю мобильное приложение для работы с сайтом, который у нас уже есть.Однако есть несколько вещей, которыми мы хотели бы воспользоваться по телефону.Например, с помощью камеры для загрузки фотографий на сайт.

В настоящее время у меня есть этот код

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

Есть ли какой-нибудь способ добавить кнопку, которая позволяет пользователям открывать меню параметровкоторый существует только в приложении (и отдельно от сайта в веб-представлении).

Я пробовал что-то вроде

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

просто для проверки, могу ли я добавить другие элементывне веб-просмотра, но мое приложение никогда не загружается (я просто вижу пустой белый экран), когда я пытаюсь это сделать.

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

Answer 2

Вы могли бы взглянуть на это: Reaction-native-webview-bridge