React Native按钮单击区域/区域

Question

我正在尝试使用可触摸的不透明度在react应用程序上制作一些按钮。然而，当我尝试调整按钮的大小时，我发现了一个问题，例如:当我设置按钮的宽度时，即使按钮的区域要小得多，屏幕末尾的整个左右区域仍然可以点击。如果我尝试添加一个边距，也会发生同样的情况，它会为相应的边距设置按钮可点击上方和下方的垂直点击区域。

<View style={styles.button}>
        <View style={[{backgroundColor: props.color}, {height: 100},
        {width: "70%"}, {margin: 10}]}>
        <Text style={styles.text}>{props.text}</Text>
    </View>
        </View>
)
return<TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>

Answer 1

默认情况下，每个元素都将alignSelf设置为“stretch”。添加看看将其更改为“flex-start”是否有帮助。

<TouchableOpacity style={{alignSelf: 'flex-start'}}>
...
</TouchableOpacity>

Answer 2

如果您使用的是react本机版本>= 0.63，那么请改用可按压组件。它更强大，它提供了hitSlop道具来调整按钮的可按压区域。

https://reactnative.dev/docs/pressable