問 - 如何在卡內背景圖像前添加文本

因此，我使用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

問 - 如何在卡內背景圖像前添加文本

回答

相關問題