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>

代替图标图像

Answer 2

在amirhosein的建议下，代码采用了以下形式：

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}>
                    <ImageBackground
                        source={this.props.selectedPlace.image}
                        style={
                            this.state.viewMode === 'portrait' ? styles.placeImagePortrait : styles.placeImageLanscape
                        }
                    >
                        <TouchableOpacity onPress={this.placeDeleteHandler}>
                            <View style={styles.nameAndIcon}>
                                <Text style={styles.placeName}>{this.props.selectedPlace.name}</Text>
                                <Icon
                                    size={30}
                                    name={Platform.OS === 'android' ? 'md-close' : 'ios-close'}
                                    color="red"
                                />
                            </View>
                        </TouchableOpacity>
                    </ImageBackground>
                </View>
            </View>
        );
    }
}

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

它当然还需要一些工作...

在图像的上角放置一个“ x”以进行删除（React Native）

2 个答案: