在 React-Native(Expo) 中将捕获的图像转换为 base64答案

【问题标题】：Convert Captured Image to base64 in React-Native(Expo)在 React-Native(Expo) 中将捕获的图像转换为 base64
【发布时间】：2019-06-02 23:21:00
【问题描述】：

我是 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 保存到状态？

【问题讨论】：

标签： react-native base64 expo

【解决方案1】：

根据this，您没有将 ref 传递给 Camera 对象，您需要创建一个 Camera 实例，然后从您的应用程序中触发它。

您的代码应如下所示：

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

有两种方法可以访问内部函数。一个是实例级别，如您所愿，另一个是静态级别。

实例您需要在 React.render 返回时调用该函数。

静态看看ReactJS Statics。但请注意，静态函数无法访问实例级数据，因此这是未定义的。

【讨论】：

我已导入相机和权限。我想我的 takePictureAsync() 函数有问题。你可以在这里查看我的完整代码：github.com/deependra97/expo.git
我明白了，您是否在设法使用 Expo 的其他库？这很奇怪，因为您似乎正确地遵循了博览会文档。
哦！我明白了，对不起，我花了这么长时间，你错过了这个：ref={ref => { this.camera = ref}} 然后this.camera.takePictureAsync
感谢您的宝贵时间和帮助。现在函数 onPress() 正在工作，但我仍然无法将捕获的图像的 base64 保存在该状态中。我的 onPress() 方法是这样的： onPress={() => { this.camera.takePictureAsync({ base64: true, }).then(data => { this.setState({base64:data.base64}) } ); console.log(this.state.base64) }}