Touchable не активируется, когда представление является абсолютной позицией в RN

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

попробуйте

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

Answer 2

Вы можете использовать свойство 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 обоим детям.