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”。添加看看是否将其更改为“灵活启动”会有帮助。

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

Answer 2

如果您使用的是React Native版本> = 0.63，请改用Pressable组件。功能更强大，它提供hitSlop道具来调整按钮的可按下区域。

https://reactnative.dev/docs/pressable

反应本机按钮单击区域/区域

2 个答案: