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