Конвертировать захваченное изображение в base64 в React-Native (Expo)

Question

Я новичок в React-Native (Expo). Я хочу взять захват изображения, преобразовать его в base64 и сохранить его в состояние.

Мой код такой:

return (
        <View style={{ flex: 1 }}>
          <Camera  style={{ flex: 1 }} type={this.state.type}>
            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }}>
              <TouchableOpacity
                style={{
                  flex: 0.1,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                }}
                onPress={() => {
                  Camera.takePictureAsync({
                    base64: true,
                  }).then(data => {
                          this.setState({base64:data.base64})
                          });
                }}>
                <Text  style={{color: 'white' }}>
                  Capture
                </Text>
              </TouchableOpacity>
            </View>
          </Camera>
        </View>
      );

Он говорит, что takePictureAsync () не является функцией. Снимок экрана с моей ошибкой:

Кто-нибудь имеет представление о том, в чем проблема? Как я могу захватить изображение и сохранить его base64 в состояние?

Answer 1

Вы не передаете ссылку на объект Camera, вам нужно создать экземпляр Camera и затем запустить его из вашего приложения, в соответствии с this .

Ваш код должен выглядеть следующим образом:

return (
        <View style={{ flex: 1 }}>
          <Camera  style={{ flex: 1 }} type={this.state.type}>
            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }}>
              <TouchableOpacity
                style={{
                  flex: 0.1,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                }}
                ref={ref => { this.camera = ref}}
                onPress={() => {
                  this.camera.takePictureAsync({
                    base64: true,
                  }).then(data => {
                          this.setState({base64:data.base64})
                          });
                }}>
                <Text  style={{color: 'white' }}>
                  Capture
                </Text>
              </TouchableOpacity>
            </View>
          </Camera>
        </View>
      );

Есть два способа доступа к внутренней функции. Один уровень экземпляра, как вы хотите, другой, статический уровень.

Instance Вам необходимо вызвать функцию при возврате из React.render.

Статический Взгляните на ReactJS Statics . Обратите внимание, однако, что статическая функция не может получить доступ к данным на уровне экземпляра, поэтому она будет неопределенной.