質問 - カード内の背景画像の前にテキストを追加する方法

Question

したがって、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, 
    } 
}); 

私は背景画像層の前にいくつかのテキストを入れたい、このような何か： どのようにすることができます私がする？

Answer 1

チェックこの

<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の

Answer 2

あなたはこれを試しましたか？

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