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

Question

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

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

但是我没有得到正确的结果

Answer 1

Button元素具有非常特定的用途，请尝试使用TouchableOpacity，此外，您的Text必须是绝对的才能显示在Image上：

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: {...}
});