使用React Native在摄像机视图上显示自定义按钮

Question

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

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

Answer 1

您可以在RNCamera视图上放置绝对视图，并将所有内容放入该绝对视图中。例如：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Kyslik\ColumnSortable\Sortable;

class Signatory extends Model{

    use Sortable;

    protected $table = 'signatories';

    protected $dates = ['created_at', 'updated_at'];

    public $sortable = ['employee_name', 'employee_position', 'type'];

    public $timestamps = false;

}

这只是一个例子。您必须使用css属性才能达到所需的布局。

Answer 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>

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