如何在 react-native 中使用单独的视图在图像上方设置文本和图标

Question

我需要在图片上方显示文字和图标。但是这里的图像视图和文本和加载图标不需要链接。两者都需要有一个单独的视图。

我设置了两个视图（一个视图用于图像，另一个用于并在我的视图中添加 marginTop:-300 值。这是一种错误的行为。

    <View style={{ aspectRatio: 4 / 5, alignSelf: 'center', width: '100%', paddingLeft: '5%', paddingRight: '5%', opacity: 0.4,}}> 
      <FastImage resizeMode={FastImage.resizeMode.cover} style={{width: '100%',height: '100%',marginTop:18}} source={["imageUrl"]}/> 
    </View>

    <View style={{flex:1, alignSelf: 'center', alignItems: 'center', justifyContent: 'center',  marginTop:-50}}> 
      <ActivityIndicator size={"large"} color={"#ffffff"} style ={{marginTop:-700,}}/> 
      <Text style={{ fontSize: 15, fontFamily: "OpenSans-Semibold",marginTop:-300,color:'white'}}>Image captured</Text>
    </View> 

https://i.stack.imgur.com/MF5kM.png

Answer 1

你可以使用Position

示例 This is an example 我创建的图片链接。

import React, { Component } from 'react';
import { View, Image,ActivityIndicator, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
      <View style={{opacity:0.5}}>
        <Image
          style={{width: 50, height: 50 }}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
        <Image
          style={{width: 50, height: 50, }}
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
        </View>
          <ActivityIndicator size={"large"} color={"red"} style={{position:"absolute"}}/> 
         <Text style={{position:"absolute",color:"red",bottom:"45%"}} > Loading </Text>
      </View>

    );
  }
}