为什么组件在 React Native 中未包装在 ScrollView 中时会缩小？答案

【问题标题】：Why components gets shrinked when not wrapped in ScrollView in ReactNative?为什么组件在 React Native 中未包装在 ScrollView 中时会缩小？
【发布时间】：2017-11-20 12:18:04
【问题描述】：

我正在按照 Stephen Grider 教程创建一个项目，但是当我没有使用 ScrollView 包裹时，我的视图缩小了，我真的被卡住了。

这里是github中的代码：https://github.com/jasonkoirala/Swipe

当我包装以下代码时：

  render() {
  return (
  <ScrollView>
  <View>
      <Deck
        data={DATA}
        renderCard={this.renderCard.bind(this)}
      />
     </View>
  </ScrollView>
   );
 }
}

这是我使用 ScrollView 包装时得到的输出：

而且，这是我不使用 ScrollView 包装时得到的输出：

我不想使用ScrollView 来包装我的内容，而是使用View，我尝试为视图赋予以下样式，但它不起作用。

`flex: 1,
backgroundColor: '#fffdff',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0`

我刚刚开始学习 ReactNative，任何人都可以帮助我并解释为什么它会这样。谢谢你。 PS：请在上面提到下载链接的项目文件夹中使用react-native run-android或react-native run-ios。

【问题讨论】：

标签： android ios reactjs react-native multi-device-hybrid-apps

【解决方案1】：

我尝试了您的源代码并找到了解决方案。

我已从 image 样式（在 App.js 中）和 buttonStyle 中删除了 flex:1，它按预期工作。

希望这会有所帮助。

【讨论】：