React Native - 无法增加第行的按钮宽度

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> 
    ); 
} 

我包裹着风格flex: 3一个<View>的宽度设置为屏幕尺寸的三分之一。 flexDirection:'column'和justifyContent:'center'将使数字居中View的中间。 View包装在TouchableWithoutFeedback中，以便我们可以绑定onPress事件。

对于你的数字网格，你包裹在<View style={{width: 500}}>。这并不总是屏幕的大小。使用Dimensions很容易获得屏幕宽度。

在你的文件的开始，你可以声明是这样的：

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

然后通过<View style={{width: screenWidth}}>更换<View style={{width: 500}}>。

总体而言，新的代码应该是这样的：

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