将图像定位在文本上

Question

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

我只是在将图像置于视图中心时遇到了一些问题。这是代码：

 <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
  },

Answer 1

这里是如何实现你想要的

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

Answer 2

您可以使用 ImageBackground 而不是 react-nativeImage

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

Answer 3

我想你忘了添加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,
    borderRadius: 20,
    backgroundColor: '#19405D',
    height: width * 0.3,
    display:"flex",
    flexDirection:"column",
    justifyContent: 'center',
    margin:"auto"
  },
  trackerName: {
    textAlign: 'center',
    color: 'white',
    fontSize: 20,
    margin: 5
  },
  logo: {
    height: 25,
    width: 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>

将图像定位在文本上

Positioning a image over text

reactjs

react-native

react-android

react-native-ios