问 - 如何在卡内背景图像前添加文本

因此，我使用NativeBase作为我的组件框架开发了React Native App。
我正在使用卡组件。
这是我的代码：
问 - 如何在卡内背景图像前添加文本

render(){ 
    return(
     <View> 
      <View style={[styles.cardWrapper]}> 
      <Card> 
       <CardItem> 
       <Image style={{ resizeMode: 'repeat', width: null }} source={require('../../assets/bg_1.jpg')} /> 
       </CardItem> 
       <CardItem> 
       <Icon name='ios-musical-notes' style={{color : '#ED4A6A'}} /> 
       <Text>Listen now</Text> 
       </CardItem> 
      </Card> 
      </View> 
     </View> 
    ) 
    }

这是我的CSS：

const styles = StyleSheet.create({ 
    cardWrapper:{ 
    padding: 20, 
    } 
});

我希望把一些文字在背景层，像这样的面前：哪有我这样做？

来源

2016-10-03 yogieputra

入住这

<CardItem> 
    <Image 
     style={{ resizeMode: 'repeat', paddingTop: 60, width: null }} 
     source={require('../../assets/bg_1.jpg')}> 
     <Text style={{ textAlign: 'center', backgroundColor: 'transparent', color: '#fff' }}>Holla</Text> 
    </Image> 
</CardItem>

这同时适用于，iOS和Android

来源

2016-10-03 12:32:11

谢谢，它的工作原理！ – yogieputra

你试过类似的东西吗？

<CardItem> 
    <Image 
     style={{ resizeMode: 'repeat', width: null }} 
     source={require('../../assets/bg_1.jpg')}> 
     <Text>Holla</Text> 
    </Image> 
</CardItem>

来源

2016-10-03 09:56:36

我已经试过了，但结果不工作如我所料。这是结果：https：//s18.postimg.org/csflvk021/Screen_Shot_2016_10_03_at_5_05_30_PM.png – yogieputra

是的，我再次检查。它只适用于Android的工作原理 –

嗯，我忘记提及，我正在为iOS工作:) – yogieputra

问 - 如何在卡内背景图像前添加文本

回答

相关问题