使用 React Native 在相机视图上显示自定义按钮答案

【问题标题】：Displaying a custom button on camera view using React Native使用 React Native 在相机视图上显示自定义按钮
【发布时间】：2018-05-14 09:32:24
【问题描述】：

有没有办法在相机视图上粘贴自定义按钮以允许用户执行某些操作？

注意：- 我正在使用 react-native-image-picker 库来选择图像。

【问题讨论】：

标签： react-native camera android-camera react-native-android

【解决方案1】：

您可以在 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 属性才能达到所需的布局。

【讨论】：

注意此代码未经测试。如果我有时间，我将为您创建一个可行的演示。祝你好运。

【解决方案2】：

只需将它添加到您的代码中，记住它应该放在里面，它将制作一个带有阴影的时尚按钮。 <RNCamera> </RNCamera>

<RNCamera> 


<View style={{position: 'absolute',                                          
       bottom: "50%",                                                    
       right: "30%",}}>

<TouchableOpacity
   style={{
       borderWidth:1,
       borderColor:'#4f83cc',
       alignItems:'center',
       justifyContent:'center',
       width:"180%",
       height:"180%",
       backgroundColor:'#fff',
       borderRadius:100,
       shadowOpacity:1,
      shadowRadius:1,
shadowColor:"#414685",
       shadowOffset: {
          width: 1,
          height: 5.5,
        },
        elevation: 6,
    
     }}
     onPress={()=>{Alert.alert('hellowworld')}}
 >
                  <Text>hello World</Text> 
  </TouchableOpacity>

</View>



</RNCamera>

在这里你可以看到输出，它将在相机的顶部。

【讨论】：