将元素定位在绝对定位元素的顶部

Question

我已经创建了此按钮，并且我正在尝试实现以下目的：

到目前为止，这是我的方法：

    <TouchableOpacity disabled={disabled} style={{position:'absolute', bottom:5, right:10}} 
onPress={()=>navigation.navigate('FilterByIngreds')}> 
      <View  style={floatStyle}>

      <Image style={{ width:40, height: 44, justifyContent:'center', alignItems:'center'}} 
source= {require('../../assets/img/05_items/ingIcon.png')}/>
      </View> 

      <View style={{width:16, height:16, borderWidth:2, borderColor:'#fff', 
 borderRadius:8, backgroundColor:'rgba(65, 204, 151, 1)', 
 position:'absolute', top:2, right:5, zIndex:5}}/>

    </TouchableOpacity>

但是DOT在按钮后面。 任何帮助将不胜感激。预先感谢！

Answer 1

您需要删除并尝试使用此代码

< TouchableOpacity
  disabled={true}
  style={{ position: "absolute", bottom: 5, right: 10 }}
  onPress={() => navigation.navigate("FilterByIngreds")}
>
  <Image
    style={{
      width: 100,
      height: 100,
      justifyContent: "center",
      borderRadius: 100 / 2,
      backgroundColor: "#000",
      alignItems: "center"
    }}
  />

  <View
    style={{
      width: 16,
      height: 16,
      borderWidth: 2,
      borderColor: "#f0f",
      borderRadius: 8,
      backgroundColor: "rgba(65, 204, 151, 1)",
      position: "absolute",
      top: 5,
      right: 10,
      zIndex: 5
    }}
  />
</TouchableOpacity>