Question

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

我正在制作一个测试应用程序，其中包含一些几乎无用的函数，可以学习一些Javascript以及如何将JS与原生Android模块相关联，但现在我仍然坚持使用该界面。我曾经使用RelativeLayout（ConstraintLayout现在）创建接口，这就是为什么我对这个类似HTML和CSS（我不是特别深入地了解）有点沮丧，说实话）。

鉴于此UI。。

。。。我实际上希望这些按钮共享屏幕上的所有空白并具有相同的高度，但我不想设置任何宽度或高度属性，因为我相信每个手机，具有自己的屏幕尺寸和分辨率，应该处理组件的大小。

在这里和那里进行搜索，我发现了一个名为flex的属性，它可以像Android的LinearLayout weigth一样工作，但是当我在任何按钮上使用它时，它们就会消失：< / p>

那么，我该怎样/可以解决这个问题呢？

以下是“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');

Source

然后，这将为按钮提供一个容器。之后，您可以使用％作为按钮的高度。因此，如果您有4个按钮，您可以将每个按钮的高度设置为25％，这将使它们适合任何屏幕。

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

2 个答案: