在React本机中将图标添加到边框按钮

Question

我是一个新的反应-本机，当我了解到有许多CSS属性不是在反应-本机样式表，如gap，网格等。

我在这个新问题上遇到了麻烦，在任何地方都找不到答案。

我希望堆叠溢出肯定会对我有帮助。提前感谢！

目标:在其边界上创建一个带有图标的按钮。

这是我的代码：

import { StyleSheet, Text, View } from 'react-native'
import React from 'react';

//styles
import CommonStyles from '../constants/CommonStyles';
//icons
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';

const App = () => {
    return (
       <View style={styles.copyButton}>
                <Text style={{fontSize:36, fontWeight:'800'}}>Copy</Text>
                <Text style={{borderRadius:50, backgroundColor:"#fff", padding: 10}}> 
                   <MaterialIcon name={"file-copy"} size={30} style={styles.copyIcon} />
                </Text>
       </View>
    )
}

export default App;

const styles = StyleSheet.create({
    copyButton: {
        backgroundColor: '#BFBFBF',
        borderRadius: 5,
        marginLeft: 72,
        marginRight: 72,
        marginTop: 40,
        padding: 32,
        position: 'relative',
        flexDirection: 'row'
    },
    copyIcon: {
        // backgroundColor: '#fff',
        // padding:10,
        // borderRadius:50
        position: 'absolute',
        transform: [{translateX: 50}],
        transform: [{translateY: 50}],
        right: 0, top: '50%',
    }
})

预期产出

Answer 1

在这里你可以检查样品

<View style={styles.copyButton}>
          <Text style={styles.btnText}>Copy</Text>
          <View style={styles.btnRelative}>
            <MaterialIcon name={"file-copy"} size={30} style={styles.copyIcon} />

          </View>
        </View>


const styles = StyleSheet.create({
  copyButton: {
    backgroundColor: '#BFBFBF',
    borderRadius: 5,
    padding: 32,
    flexDirection: 'row',
    width: '40%',
  },
  copyIcon: {
    position: 'absolute',
    transform: [{translateX: 50}],
    right: 0,
    top: '50%',
  },
  btnText: {fontSize: 36, fontWeight: '800'},
  btnRelative: {
    borderRadius: 50,
    backgroundColor: '#fff',
    padding: 10,
    position: 'absolute',
    end: -25,
    alignSelf: 'center',
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
});