Question

我尝试了绝对尺寸和弹性尺寸，View只是将按钮设置为标准尺寸（约50px）。高度被拉伸，但宽度不可能改变。

class Calculator extends Component {
    constructor() {
        super();
        this.state = { "lastClicked" : "None" };
        this.buttonPress = this.buttonPress.bind(this);
    }
    createButton(id) {
        return (
            <Button
                title={id}
                onPress={() => this.buttonPress(id)}
            />
        );
    }
    buttonPress(id) {
        this.setState({ "lastClicked" : id });
    }
    render() {
        return (
            <View style={{alignContent: "stretch"}}>
                <View style={{width: 500}}>
                    <Text style={{fontSize: 30}}>This is a JavaScript Calculator</Text>
                    <Text style={{fontSize: 20}}>You clicked: {this.state.lastClicked}</Text>
                </View>
                <View style={{width: 500}}>
                    <View style={{ width: 500, height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("4")}
                        {this.createButton("5")}
                        {this.createButton("6")}
                    </View>
                    <View style={{ width: 500, height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("4")}
                        {this.createButton("5")}
                        {this.createButton("6")}
                    </View>
                    <View style={{ width: 500, height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("1")}
                        {this.createButton("2")}
                        {this.createButton("3")}
                    </View>
                </View>
            </View>
        );
    }
}

}

你能看到这个问题吗？我是React-Native的新手，这个问题已经消耗了3个小时。

Answer 1

您可以使用以下内容替换createButton()方法：

createButton(id) {
    return (
      <TouchableWithoutFeedback  onPress={() => this.buttonPress(id)}>
       <View style={{flex: 3, flexDirection:'column', justifyContent:'center', alignItems:'center'}}>
        <Text style={{fontSize:30}}>{id}</Text>
       </View>
       </TouchableWithoutFeedback>
    );
}

我用样式<View>包裹了一个flex: 3，用于将宽度设置为屏幕尺寸的三分之一。 flexDirection:'column'和justifyContent:'center'会将数字置于View的中间位置。 View包含在TouchableWithoutFeedback中，以便我们可以绑定onPress事件。

对于您的数字网格，您将其包裹在<View style={{width: 500}}>中。这并不总是屏幕的大小。使用Dimensions可以轻松获得屏幕宽度。

在文件的开头，您可以声明如下内容：

const screenWidth = Dimensions.get('window');

然后将<View style={{width: 500}}>替换为<View style={{width: screenWidth}}>。

总的来说，您的新代码应如下所示：

import React, { Component } from 'react';
import { Text, View, Dimensions, TouchableWithoutFeedback } from 'react-native';

const screenWidth = Dimensions.get('window');

export default class App extends Component {
 constructor() {
        super();
        this.state = { "lastClicked" : "None" };
        this.buttonPress = this.buttonPress.bind(this);
    }
    createButton(id) {
        return (
          <TouchableWithoutFeedback  onPress={() => this.buttonPress(id)}>
           <View style={{flex: 3, justifyContent:'center', alignItems:'center'}}>
            <Text style={{fontSize:30}}>{id}</Text>
           </View>
           </TouchableWithoutFeedback>
        );
    }
    buttonPress(id) {
        this.setState({ "lastClicked" : id });
    }
    render() {
        return (
            <View style={{alignContent: "stretch"}}>
                <View style={{width: screenWidth}}>
                    <Text style={{fontSize: 30}}>This is a JavaScript Calculator</Text>
                    <Text style={{fontSize: 20}}>You clicked: {this.state.lastClicked}</Text>
                </View>
                <View style={{width:screenWidth}}>
                    <View style={{height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch",}}>
                        {this.createButton("7")}
                        {this.createButton("8")}
                        {this.createButton("9")}
                    </View>
                    <View style={{height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("4")}
                        {this.createButton("5")}
                        {this.createButton("6")}
                    </View>
                    <View style={{height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("1")}
                        {this.createButton("2")}
                        {this.createButton("3")}
                    </View>
                </View>
            </View>
        );
    }
}

Demo on snack.expo.io

React Native - 无法增加行

1 个答案: