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

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)。一开始可能会令人沮丧，但如果您可以避免使用宽度和高度并完全使用 flex，您的布局会好得多。这并不总是可能的，但我认为它对于您想要完成的工作来说效果很好。

我希望这能让您对未来可以做些什么有所了解，如果您有任何问题，请告诉我！