时间戳

首页 > 解决方案 > React Native Flex 不会填充宽度相等

css - React Native Flex 不会填充宽度相等

问题描述

我创建了一个自定义组件，它只是一个计数器，但有一个小样式错误。我尝试了很多东西，但我找不到任何解决方案。你能告诉我有什么问题和解决方法吗？

错误

我添加了 3 可触摸的不透明度。他们有弹性： 1. 当我给它的父级提供背景颜色时，它会改变所有需要填充的区域。我需要做的是所有对象背景必须相等。

import React, { Component } from "react";
import { StyleSheet, View, Text, ViewPropTypes} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import PropTypes from "prop-types";

class Counter extends Component{
    constructor(props){
        super(props);

        this.style = StyleSheet.create({
            topContainer:{
                flex:1,
                width:"100%",
                flexDirection:"column",
                alignItems:"center",
                justifyContent:"center"
            },
            topPanel:{
                flex:1,
                flexDirection:"row",
                alignItems:"center",
                justifyContent:"center",
                width:"100%",
            },
            bottomPane:{
                flex:1,
                flexDirection:"row",
                width:"100%",
                alignItems:"center",
                justifyContent:"center",
            },
            buttonStyle:{
                flex:1,
                alignItems:"center",
                justifyContent:"center",  
            },
    });
}

static propTypes  = {
    backgroundStyle : ViewPropTypes.style,
    textStyle: Text.propTypes.style,
    buttonBackground: ViewPropTypes.style,
    returnFunc: PropTypes.func,
};

/*
this.props = 
{"buttonBackground":{"backgroundColor":"#cc99ff","borderRadius":20,"margin":4},
"backgroundStyle":{"backgroundColor":"#cc99ff","borderRadius":20,"margin":4},
"textStyle":{"fontSize":25.919999999999995,"textAlign":"center","color":"#ffffff"}}
*/

render(){
    console.log("Counter:56 " , JSON.stringify(this.props));
    return(
        <View style = {this.style.topContainer}>
            <View style={[this.style.topPanel,this.props.backgroundStyle]}>
                <Text style={this.props.textStyle}>2</Text>
            </View>

            <View style={this.style.bottomPane}>
                <TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}> 
                    <Text style={this.props.textStyle}>Increment</Text> 
                </TouchableOpacity>

                <TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}> 
                    <Text style={this.props.textStyle}>Decrement</Text> 
                </TouchableOpacity>

                <TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}>
                    <Text style={this.props.textStyle}>Save</Text>
                </TouchableOpacity>
            </View>

        </View>
    );
}
}
export default Counter;

这是该组件的所有代码。所有样式都有弹性。我不知道它为什么这样做。

感谢所有帮助。

标签： cssreactjsreact-native

解决方案

似乎问题出在TouchableOpacityfrom react-native-gesture-handler。

尝试TouchableOpacity从react-native

import { StyleSheet, View, Text, ViewPropTypes, TouchableOpacity } from "react-native";

推荐阅读