Question

我试图在左上方保持几个按钮，而在右侧保持其他按钮。但可触摸的操作不工作的右侧视图。我想提出两个侧点击。但是只有一侧在起作用。会是什么问题？

<View style={{flexDirection: 'row', justifyContent: 'space-between', justifyContent: 'center', paddingHorizontal: 12 }}>
   <View style={{flexDirection: 'row-reverse'}}>
     <TouchableOpacity onPress={...}> Right icon 1 </TouchableOpacity>
     <TouchableOpacity onPress={...}> Right icon 2 </TouchableOpacity>
   </View>
   <TouchableOpacity onPress={...} style={{position: 'absolute', zIndex: 10}}> Back </TouchableOpacity>
</View>

Answer 1

您可以使用alignSelf属性，而不要使用绝对位置，

<View
      style={{
        flexDirection: "row",
        paddingHorizontal: 12
      }}
    >
      <View style={{ flexDirection: "row-reverse",alignSelf:"flex-end" }}>
        <TouchableOpacity> Right icon 1 </TouchableOpacity>
        <TouchableOpacity> Right icon 2 </TouchableOpacity>
      </View>
      <TouchableOpacity style={{ alignSelf:"flex-start"}}> Back </TouchableOpacity>
</View>

注意（更改）：从容器中删除了justifyContent，从后退按钮中删除了position和zIndex，并向两个孩子都添加了alignSelf。

Answer 2

尝试

    <View style={{ flexDirection: 'row', paddingHorizontal: 12 }}>
        <TouchableOpacity onPress={() => alert("back")} >
          <Text> Back </Text>
        </TouchableOpacity>
      <View style={{ flexDirection: 'row-reverse', flex: 2 }}>
        <TouchableOpacity onPress={() => alert("icon1")}>
          <Text>Right icon 1 </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => alert("icon2")}>
          <Text> Right icon 2</Text>
        </TouchableOpacity>
      </View>
    </View>

当视图在RN中处于绝对位置时，Touchable不可单击

2 个答案: