Question

我是React-Native（Expo）的新手。我想获取Image Capture，将其转换为base64并将其保存为state。

我的代码是这样的：

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

根据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。但是请注意，静态函数无法访问实例级数据，因此它将是未定义的。

在React-Native（Expo）中将捕获的图像转换为base64

1 个答案: