react-native - 如何将图像定义为背景按钮

Question

我尝试使用此代码将图像作为按钮的背景:

      <Button  style= {styles.btn }>
          <Image source={ require('.src.png')}  style={styles.img}/>
          <Text> title </Text> 
      </Button>

但我没有得到正确的结果
任何帮助，请

Answer 1

Button 元素具有非常具体的用途，请尝试使用 TouchableOpacity 代替，此外，您的 Text 必须是绝对的才能出现在图像上:

import {TouchableOpacity, Text, Image, View, StyleSheet } from 'react-native';

const button = () =>
    <TouchableOpacity style={styles.btn}>
        <View style={styles.absoluteView}>
            <Text>title</Text>
        </View>
        <Image source={require('.src.png')}  style={styles.img}/>
    </TouchableOpacity>;

const styles = StyleSheet.create({
    absoluteView: {
        flex: 1,
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },
    img: {...},
    btn: {...}
});