Question

如何在反应原生

中对齐ImageBackground组件右上角的关闭按钮图标

代码：

<ImageBackground 
  source={require('../images/AppIntro/1.png')} 
  style={{ width: '100%', height: 150 }} 
>
  <TouchableOpacity>
    <Icon name="md-close" style={styles.closeButton} />
  </TouchableOpacity>
</ImageBackground>

编辑：我正在尝试创建一个模式（弹出），它将在按钮单击时显示，因此绝对位置可能无效。

Answer 1

<View>
    <Image
        source={require('../images/AppIntro/1.png')} 
        style={{ width: '100%', height: 150 }}
    />
    <Icon name="md-close" style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0
                        }} />
</View>

以上代码剪切会将图标置于图像顶部，水平和垂直居中于图像中心。您可以调整顶部，左侧，右侧和底部，并将其移动到图像顶部的任何位置。

Answer 2

els = document.getElementsByTagName('p');
for(let i = 0; i < els.length; i++){
  if(els[i].innerHTML.includes('do')){
    els[i].parentElement.removeChild(els[i]);
  }
}

此工作右侧上角..

Answer 3

You need to use position: 'absolute' to align children anywhere you want with in parent. In your case you need to use top, and right along with absolute position. Consider following example:

<Parent>
  <Child style={{position: 'absolute', top: 5, right: 5}}>
    {...}
  </Child>
</Parent>

You can read more about position here

ImageBackground右上角的对齐关闭按钮反应原生

3 个答案: