如何在React-native中使用相等大小的組件共享空間

Question

我最近開始使用Javascript和React-native測試它是否可以在我現在的公司中使用，但我面臨一些UI問題。

我正在制作一個測試應用程序，其中包含一些幾乎無用的函數來學習一些Javascript以及如何將JS與原生Android模塊相關聯，但現在我仍然堅持使用該界面。 我曾經使用RelativeLayout （現在是ConstraintLayout ）創建接口，這就是為什么我對這個類似HTML和CSS（我不是特別深入地了解，為此誠實）有點沮喪。

鑒於此UI。 。 。

。 。 。 我實際上希望這些按鈕共享屏幕上的所有空白並具有相同的高度，但我不想設置任何寬度或高度屬性，因為我相信每個手機，具有自己的屏幕尺寸和分辨率，應該處理組件的大小。

在這里和那里四處搜索，我發現了一個名為flex的屬性，據說可以像Android的LinearLayout weigth ，但是當我在任何按鈕上使用它時，它們就會消失：

那么，我應該如何解決這個問題呢？

以下是“HTML”和使用的樣式：

render() {
    return (
      <View style={styles.container}>
        <View style={styles.containerText}>
          <ScrollView
            style={styles.scrollTextStyle}
            contentContainerStyle={{ flexGrow: 1 }}
          >
            <Text style={styles.textStyle}>{this.state.textField}</Text>
          </ScrollView>

          <TextInput
            multiline={true}
            style={styles.inputStyle}
            onChangeText={inputField =>
              this.setState({
                inputField
              })}
            value={this.state.inputField}
          />

        </View>
        <View style={styles.containerButton}>
          <Button
            style={[styles.buttons, styles.firstButton]}
            onPress={() => this.pressedButton(1)}
          >
            Copy input to text
          </Button>

          <Button
            style={[styles.buttons, styles.secondButton]}
            onPress={() => this.pressedButton(2)}
          >
            Android/iOS Toast
          </Button>

          <Button
            style={[styles.buttons, styles.thirdButton]}
            onPress={() => this.pressedButton(3)}
          >
            Android module (Method)
          </Button>

          <Button
            style={[styles.buttons, styles.fourthButton]}
            onPress={() => this.pressedButton(4)}
          >
            Android module (AsyncTask)
          </Button>

        </View>
      </View>
    );
}

const styles = StyleSheet.create({
  //Root View
  container: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: "#F5FCFF"
  },
  //Texts View
  containerText: {
    flex: 2,
    justifyContent: "center",
    backgroundColor: "#EFEFFF"
  },
  //Buttons View
  containerButton: {
    flex: 4,
    flexDirection: "column",
    backgroundColor: "#FFFFFF",
    justifyContent: "space-between"
  },
  //Components on first View
  scrollTextStyle: {
    borderWidth: 1,
    marginTop: 10,
    marginBottom: 5,
    marginHorizontal: 10,
    flex: 1
  },
  textStyle: {
    backgroundColor: "#CEF",
    textAlign: "center",
    textAlignVertical: "center",
    flex: 1
  },
  inputStyle: {
    borderWidth: 1,
    marginTop: 5,
    marginBottom: 10,
    marginHorizontal: 10,
    backgroundColor: "#CEF",
    textAlign: "center",
    textAlignVertical: "center",
    flex: 1
  },
  //Components on second view
  //Common style for all buttons and a different one for each
  buttons: {
    borderRadius: 5,
    textAlign: "center",
    textAlignVertical: "center",
    fontSize: 20
  },
  firstButton: {
    color: "#FFFFFF",
    backgroundColor: "#D1E233"
  },
  secondButton: {
    color: "#FFFFFF",
    backgroundColor: "#239923"
  },
  thirdButton: {
    color: "#FFFFFF",
    backgroundColor: "#958475"
  },
  fourthButton: {
    color: "#FFFFFF",
    backgroundColor: "#651278"
  }
});

順便說一句，我會欣賞任何關於React-native上的用戶界面的類似教程的網絡，因為我只發現了一些解釋屬性的無用的東西，但沒有高質量的完整示例。

Answer 1

您可以使用Dimension

import {Dimensions} from 'react-native';
Dimensions.get('window').height

或使用react-native-easy-grid

<Grid>
    <Row></Row>
    <Row></Row>
</Grid>

它將創建2個相等高度的行

Answer 2

我建議在div中包裝所有按鈕，然后使div的高度等於屏幕高度 - 輸入字段的高度。

Example: var {height, width} = Dimensions.get('window');

資源

然后，這將為按鈕提供一個容器。之后，您可以使用％作為按鈕的高度。 因此，如果您有4個按鈕，您可以將每個按鈕的高度設置為25％，這將使它們適合任何屏幕。