在图像的顶角放置一个“x”，用于删除（React Native）

Question

当方向发生变化时，请在图像的顶角使用“x”进行删除。我可以将垃圾桶图标和位置（img）的名称放在 img 旁边。学习如何在另一个顶角放置一个 'x'... 加上（也许）该地点的名称会很好。谢谢

...
class PlaceDetail extends Component {
    state = {

    viewMode: Dimensions.get('window').height > 500 ? 'portrait' : 'landscape'
    }

constructor(props) {
super(props);
Dimensions.addEventListener('change', this.updateStyles )
    }

componentWillUnmount() {
 Dimensions.removeEventListener('change', this.updateStyles )
    }
updateStyles = (dims) => {
    this.setState({
    viewMode: dims.window.height > 500 ? 'portrait' : 'landscape'
        })
    }
render(){
return (
<View style={styles.container}>
<View style={this.state.viewMode === 'landscape' ? 
      styles.viewImageLandScape : null } >
    <Image 
        source={this.props.selectedPlace.image} 
        style={
        this.state.viewMode === 'portrait' ? 
        styles.placeImagePortrait :
        styles.placeImageLanscape }/>
<Text style={styles.placeName}>{this.props.selectedPlace.name}</Text>
</View>
<View>
<TouchableOpacity onPress={this.placeDeleteHandler}>
<View style={styles.deleteButton}>
<Icon size={30} name={Platform.OS ==='android' ? "md-trash" : "ios-trash"} color="red" />
</View>
</TouchableOpacity>
</View>
</View>
        );
    }

};

const styles = StyleSheet.create({
    container: {
        margin: 22
    },
    placeImagePortrait: {
        width: '100%',
        height: 200
    },
    viewImageLandScape: {
        justifyContent: 'center',
           alignItems: 'center',
    },
    placeImageLanscape: {
        width: '50%',
        height: 200, 
        marginTop: 0
    },
    placeName: {
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: 28
    },
    deleteButton: {
        alignItems: 'center'
    }
});

所以这是带有名称和图像下方删除图标的代码，但在一行中：

 class PlaceDetail extends Component {
    state = {
        viewMode: Dimensions.get('window').height > 500 ? 'portrait' : 'landscape'
    };

    constructor(props) {
        super(props);
        Dimensions.addEventListener('change', this.updateStyles);
    }

    componentWillUnmount() {
        Dimensions.removeEventListener('change', this.updateStyles);
    }

    updateStyles = (dims) => {
        this.setState({
            viewMode: dims.window.height > 500 ? 'portrait' : 'landscape'
        });
    };

    placeDeleteHandler = () => {
        // selectedPlace: is props we pushed from FindPlace
        this.props.onDeletePlace(this.props.selectedPlace.key);
        this.props.navigator.pop();
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={this.state.viewMode === 'landscape' ? styles.viewImageLandScape : null}>
                    <Image
                        source={this.props.selectedPlace.image}
                        style={
                            this.state.viewMode === 'portrait' ? styles.placeImagePortrait : styles.placeImageLanscape
                        }
                    />
                </View>
                <View style={this.state.viewMode === 'landscape' ? styles.nameAndIcon : null}>
                    <Text style={styles.placeName}>{this.props.selectedPlace.name}</Text>
                    <TouchableOpacity onPress={this.placeDeleteHandler}>
                        <View style={styles.deleteButton}>
                            <Icon size={30} name={Platform.OS === 'android' ? 'md-trash' : 'ios-trash'} color="red" />
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({ 
    container: {
        margin: 22
    },
    nameAndIcon: {
        flexDirection: 'row',
        justifyContent: 'space-evenly'
    },
    placeImagePortrait: {
        width: '100%',
        height: 200
    },
    viewImageLandScape: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    placeImageLanscape: {
        width: '50%',
        height: 200
    },
    placeName: {
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: 28
    },
    deleteButton: {
        alignItems: 'center'
    }
});

Answer 1

使用ImageBackground代替Image：

<ImageBackground source={require('YOUR_MAIN_IMAGE')} style={{height: 100, width: 200}}>
          <TouchableHighlight
              onPress={()=> your_function()}
            >
              <Image source={require('YOUR_ICON_PATH')} style={{height: 40, width: 40,margin:15}}/> 
          </TouchableHighlight>

        </ImageBackground>

而不是您可以使用的图标图像 <Text> X </Text>