Question

所以我只是在学习...。在react-native中构建一个测验应用程序，我认为按钮的第一行和按钮的第二行之间的空间太大，如何减少它？谢谢

<LinearGradient colors={['#0D0B18','#28263E']} style={styles.container}>
    <Text style={styles.question}>After Jesus rose from the dead, how long did he remain on earth before ascending to heaven? </Text>

    <View style={styles.buttonRow}>
      <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
        <Text style={styles.buttonText}>12 days</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
        <Text style={styles.buttonText}>40 days</Text>
      </TouchableOpacity>
    </View>
    <View style={styles.buttonRow}>
      <TouchableOpacity style={styles.buttonStyle}onPress={this.onPress}>
        <Text style={styles.buttonText}>3 months</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
        <Text style={styles.buttonText}>1 year</Text>
      </TouchableOpacity>
    </View>
    <View style={styles.progressStyle}>
      <ProgressViewIOS
        style={styles.progressView}
        progress={(0.2)}
      />
    </View>

  </LinearGradient>


const styles = StyleSheet.create ({
 container: {
   flex: 3,
 },
 question: {
   paddingTop: '20%',
   padding: 30,
   flex: 1,
   color: '#fff',
   fontSize: 25
 },
  buttonRow : {
    marginTop: 0,
    flexDirection: 'row',
    color: '#fff',
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
  buttonStyle: {
    backgroundColor: '#fff',
    width: '40%',
    height: '50%',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10
  },
  buttonText: {
    color: '#000'
  },
  progressView: { 
    width: '90%',
  },
  progressStyle: {
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

Answer 1

小的，对于没有兄弟姐妹的元素，您不需要flex: 3，这没关系，但是如果flex: 1是单独的并且不需要占用更多空间，则只需要分配它即可相对于兄弟姐妹的空间。

要使按钮显示良好，您应该给它们包装一个包装：

<View style={styles.buttonWrapper}>
  <View style={styles.buttonRow}>
    <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
      <Text style={styles.buttonText}>12 days</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
      <Text style={styles.buttonText}>40 days</Text>
    </TouchableOpacity>
  </View>
  <View style={styles.buttonRow}>
    <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
      <Text style={styles.buttonText}>3 months</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
      <Text style={styles.buttonText}>1 year</Text>
    </TouchableOpacity>
  </View>
</View>

styles.buttonWrapper只是：

buttonWrapper: {
  flex: 1,
  justifyContent: "space-around"
},

现在，考虑到进度条的高度后，您的按钮组和问题将占据均匀的空间，并且由于justifyContent: 'space-around'

，按钮组将被挤压在一起

但是，这会更改按钮的大小，因此，要使此按钮起作用，您应该将按钮样式更改为类似以下内容：

buttonStyle: {
  backgroundColor: "#fff",
  flex: 1,
  marginHorizontal: 5,
  aspectRatio: 2,
  justifyContent: "center",
  alignItems: "center",
  borderRadius: 10
},

您可以在此处看到此操作：https://snack.expo.io/HkWF-EsA7

刚起步时，Flex可能会有些怪异，所以我建议您做很多尝试。有一些有趣的属性，例如aspectRatio，alignContent，alignSelf和许多其他(learn more about those here)。起初可能令人沮丧，但是如果您可以避免使用width和height而完全使用flex，则布局会更好。这并非总是可能的，但我认为这对您要完成的工作会很好。

如果您有任何问题让我知道，我希望这能使您对下一步的工作有所了解！

如何减少这些View组件之间的空间React Native

1 个答案: