将图像定位在文本上

问题描述

我正在尝试将图像置于视图中的文本上方。我试图这样定位它：

我只是在将图像居中显示在视图中时遇到了一些麻烦。代码如下：

 <View style={styles.trackerBox}>
              <Text style={styles.trackerName}>Test</Text>
              <Image
                source={{
                  uri: "https://imageLink.png"
                }}
                style={styles.logo}
              />
              {this.props.user.test_trackers
                .map(x => x.type)
                .includes("test") ? (
                  <Icon
                    name="check-circle"
                    color={"#00FF00"}
                    size={25}
                    style={styles.linked}
                  />
                ) : null}
            </View>

和风格：

  trackerBox: {
    width: width * 0.3,borderRadius: 20,backgroundColor: "#19405D",height: width * 0.3,justifyContent: "center"
  },trackerName: {
    textAlign: 'center',color: "white",fontSize: 20,},logo: {
    height: 25,width: 25,position: "absolute",top: 10,right: 0,left: 0
  },

解决方法

这是如何实现你想要的

import React from 'react';
import { Text,View,StyleSheet,Dimensions,Image } from 'react-native';

export default function App() {
return (
 <View style={styles.trackerBox}>
   <Image
     source={{
      uri:
        'https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg',}}
    style={styles.logo}
   />
   <Text style={styles.trackerName}>Test</Text>
 </View>
 );
}
const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
 trackerBox: {
 width: width * 0.3,borderRadius: 20,backgroundColor: '#19405D',height: width * 0.3,justifyContent: 'center',},trackerName: {
 textAlign: 'center',color: 'white',fontSize: 20,logo: {
 height: 25,width: 25,alignContent: 'center',alignSelf: 'center',});

您也可以在这里尝试https://snack.expo.io/-PrSEkZ24

,

我想你忘记添加 display: flex，看看这个。

const App = () => (
  <div style={styles.trackerBox}>
    <img style={styles.logo} src="https://cdn1.byjus.com/wp-content/uploads/2019/11/essay-on-christmas.png" />
    <h5 style={styles.trackerName}>Title</h5>
  </div>
);

const width = 400;
const styles = {
  trackerBox: {
    width: width * 0.3,display:"flex",flexDirection:"column",margin:"auto"
  },trackerName: {
    textAlign: 'center',margin: 5
  },logo: {
    height: 25,margin: "0 auto"
  },}
ReactDOM.render(<App />,document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

,

您可以使用 ImageBackground 而不是 react-native 中的 Image

     <ImageBackground style={styles.theImage} source={{uri : item.imageUrl}}>
          <Text>Text as a child to ImageBackground</Text>
     </ImageBackground>