Question

我正在构建一个显示一些图标的组件，以便用户选择颜色，该组件只是一个<View>，在其内部有一个flatlist显示图标：这是代码：

class Color extends Component {
    
    icons_config = {name: "square-full", size: 80, color: "black"};
    show_hide_ = false;
    options_array = [
        {option_icon: <FontAwesome5 name = {this.icons_config.name} size = {this.icons_config.size} color = "red"/>, key: "red"}, 
        {option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size}  color = "blue"/>, key: "blue"}, 
        {option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size}  color = "green"/>, key: "green"}, 
        {option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size}  color = "yellow"/>, key: "yellow"},
        {option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size}  color = "purple"/>, key: "purple"},
        {option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size}  color = "black"/>, key: "rgba(0,0,0,0.7)"},
        {option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size}  color = "gray"/>, key: "gray"},
        {option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size}  color = "orange"/>, key: "orange"},
        {option_icon: <AntDesign name="closesquareo" size={80} color="black" />, key: ""}, //x icon for delete color
    ];
    window_width = Dimensions.get("window").width;
    window_height = Dimensions.get("window").height;

    render() { 
        return (
            <>
                <View style = {this.styles.container}>
                    {this.options_array.map((option) => {
                        return (
                            <View key = {option.key} style = {this.styles.options}>
                                <TouchableOpacity style = {this.styles.touchable} onPress = {() => this.choose_color(option.key)}>
                                <Text>{option.option_icon}</Text>
                                </TouchableOpacity>
                            </View>
                        );
                    })}
                </View>
            </>
        );
    }

和样式表代码：

styles = StyleSheet.create({
    container: {
        position: "absolute",
        justifyContent: "space-around",
        width: Math.round(this.window_width) * 0.8, 
        height: Math.round(this.window_width) * 0.8,
        flexWrap: "wrap",
        flexDirection: "row",
        alignSelf: "center",
        //backgroundColor: "#DCDCDC",
        backgroundColor: "red",
        marginTop: 200,
    }, 
    options: {
        paddingTop: Math.round(this.window_width) * 0.025,
        justifyContent: "center",
    }
});

现在的问题是，我在Dimensions.get("window").width中使用width and height为所有设备创建了一个响应方块，问题是它在我的小米mi 9T中不起作用，但在我的小米mi 9T中起作用plus 7 pro和我的华为p9 plus，在这里我要张贴一些截图，以便您可以看到它：

小米米9t：

一加7专业版：

华为p9 plus：

我想这与图标大小有关，但是对于加号和华为没问题，我该如何解决呢？

Answer 1

您可以使用窗口道具获取屏幕的宽度或高度，并设置卡的宽度和高度。

以下示例将为您提供帮助，

 import { StyleSheet, Dimensions } from 'react-native';
    
    const window = Dimensions.get('window');

    styles = StyleSheet.create({

    container: {
         width: (window.width) * 0.8,
         height: (window.width) * 0.8
    }, 
   
});

Dimension在小米手机中不起作用？本机

1 个答案: