javascript - React-native 中如何与大小相同的组件共享空间

Question

我最近开始使用 Javascript 和 React-native 来测试它是否可以在我现在的公司中使用，但我面临一些 UI 问题。

我正在制作一个测试应用程序，其中包含一些几乎无用的功能，以学习一些 Javascript 以及如何将 JS 与 native 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 个等高行