justifyContent：'space-around'在React Native中没有余量

Question

我是React Native的新手，正在开发名为ReactNativeWeather

的开源项目

我已将四个ForecastView放在一行中，如

<View style={styles.forecastContainer}>
  <ForecastView style={styles.forecast}/>
  <ForecastView style={styles.forecast}/>
  <ForecastView style={styles.forecast}/>
  <ForecastView style={styles.forecast}/>
</View>

我尝试将一行中的所有ForecastView与一些边距对齐。像

此屏幕截图来自另一个开源项目SwiftWeather

但在ReactNativeWeather中，它看起来像

以下是样式

  forecastContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  forecast: {
    flex: 1
  }

我认为justifyContent: 'space-around'应该完成这项工作，但不要为什么不这样做。你能给我一些提示吗？

代码在https://github.com/JakeLin/ReactNativeWeather上，可以查看提交0ccf4abb879656ab785814f01581121b60fc3b3a

由于

Answer 1

我已通过指定width

修复了此问题

const { width, height } = Dimensions.get('window');
  forecastContainer: {
    paddingTop: 80,
    width: width,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },

这是Github中的解决方案https://github.com/JakeLin/ReactNativeWeather/blob/57e37946c4e6bf655d0660e0cf5e0bdb38fe358d/src/WeatherView-styles.js#L36