Отображение пользовательской кнопки на виде камеры с помощью React Native - PullRequest
Новая
       20

Отображение пользовательской кнопки на виде камеры с помощью React Native

0 голосов
/ 14 мая 2018

Есть ли способ прикрепить пользовательскую кнопку на виде с камеры, чтобы позволить пользователю выполнить какое-либо действие?

Примечание: - Я использую библиотеку реагировать на родной образ для выбора изображения.

1 Ответ

0 голосов
/ 14 мая 2018

Вы можете расположить абсолютное представление над представлением RNCamera и поместить весь ваш контент в это абсолютное представление. Например: 

import { RNCamera } from 'react-native-camera';

class TakePicture extends Component {

  takePicture = async () => {
    try {
      const data = await this.camera.takePictureAsync();
      console.log('Path to image: ' + data.uri);
    } catch (err) {
      // console.log('err: ', err);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={cam => {
            this.camera = cam;
          }}
          style={styles.preview}
        >
          <View style={styles.captureContainer}>
            <TouchableOpacity style={styles.captureBtn} onPress={this.takePicture}>
              <Icon style={styles.iconCamera}>camera</Icon>
              <Text>Take Photo</Text>
            </TouchableOpacity>
          </View>
        </RNCamera>

        <View style={styles.space} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'relative'
  },

  captueContainer: {
    position: 'absolute'
    bottom: 0,
  },
  
  captureBtn: {
    backgroundColor: 'red'
  }
});

Это всего лишь пример. Вам придется поиграть со свойствами CSS, чтобы достичь желаемого макета.

...