0

所以,我使用 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,
  }
});

我想在背景图像层前面放一些文字,像这样: 在此处输入图像描述 我该怎么做?

4

2 回答 2

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

于 2016-10-03T12:32:11.020 回答
0

你尝试过这样的事情吗?

<CardItem>
    <Image
      style={{ resizeMode: 'repeat', width: null }}
      source={require('../../assets/bg_1.jpg')}>
        <Text>Holla</Text>
    </Image>
</CardItem>
于 2016-10-03T09:56:36.253 回答