如何在 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 我创建的图像 link。

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>

    );
  }
}

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

How to set text and an icon above the image with separate view in react-native

react-native

react-native-image