代码之家 › 专栏 › 技术社区 › Morton

如何在图像上方添加文本?

react-native-swiper react-native

1

Morton · 技术社区 · 6 年前

我使用 react native sciper 并且我想在我的图像上方添加一个文本。

我尝试设置style container image paragraph ,it is still not working.

我应该如何处理样式设置?


   
    
     
      
       
        
         
          
           任何帮助都将不胜感激。事先谢谢。
          
          
          
          import react,component from'react';
从'react native'导入视图、文本、图像、尺寸;
从“React Native Swiper”导入刷卡器;

const dimensions=dimensions.get(“window”).width;

关于扩展组件的类{
RelDead(){
返回(
<view style=flex:1>
斯皮尔
style=styles.wrapper_
高度={ 200 }
paginationStyle=底部:10
gt;
<view style=styles.container>
<image style=styles.image source=require('../img/home_service_bg1.jpg')/>
<text style=styles.paragraph>如何让我在img上方显示。</text>
&Lt/VIEW & GT;
<view style=flex:1>
<image source=require('../img/home_service_bg2.jpg')style=styles.img/>
&Lt/VIEW & GT;
&;

<view style=flex:2>
<text>嗨</text>
&Lt/VIEW & GT;
&Lt/VIEW & GT;
;
}
}

常量样式={
包装件:{
}
容器:{
Flex:1,
alignitems:'拉伸',
justifycontent:'中心',
}
图像:{
FLUGROW:1,
高度:NULL,
宽度:NULL,
Alignitems:'居中',
JustifyContent:'中心',
}
段落:{
textAlign:'居中',
}
};

导出默认值关于;
< /代码> 

我现在的情况是:


我希望它变成这样:
.,它仍然不工作。


我应该如何处理样式设置?

任何帮助都将不胜感激。事先谢谢。

import React, { Component } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';

const dimensions = Dimensions.get('window').width;

class About extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Swiper
          style={styles.wrapper}
          height={200}
          paginationStyle={{bottom: 10}}
        >
          <View style={styles.container}>
            <Image style={styles.image} source={require('../img/home_service_bg1.jpg')} />
            <Text style={styles.paragraph}>How to let me show above the img.</Text>
          </View>
          <View style={{ flex: 1 }}>
            <Image source={require('../img/home_service_bg2.jpg')} style={styles.img}/>
          </View>
        </Swiper>

        <View style={{ flex: 2 }}>
          <Text>Hi</Text>
        </View>
      </View>   
    );
  }
}

const styles = {
  wrapper: {
  },
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  image: {
    flexGrow:1,
    height:null,
    width:null,
    alignItems: 'center',
    justifyContent:'center',
  },
  paragraph: {
    textAlign: 'center',
  },
};

export default About;


我现在的情况是:


我希望它变成这样:

1 回复 | 直到 6 年前

1

Khemraj Sharma 6 年前

position="absolute" 会像安卓一样工作吗? RelativeLayout .

如果你想在顶部设置视图 marginTop to 0 .

在看到你的要求之后。你可以简单地使用 ImageBackground

  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>

见 facebook docs