React Native 中的 ScrollView 和 justifyContent 问题

Question

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, ScrollView } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.top} />

          <View style={styles.contentContainer}>
            <View style={styles.content}>
              <Text>Item1</Text>
            </View>

            <View style={styles.content}>
              <Text>Item2</Text>
            </View>

            <View style={styles.content}>
              <Text>Item3</Text>
            </View>
          </View>
        </ScrollView>

        <View style={[styles.tabbar]} />
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  top: {
    height: 346,
    backgroundColor: '#0066cc',
  },

  contentContainer: {
    flex: 1,
    justifyContent: 'space-around',
  },

  content: {
    padding: 20,
    borderWidth: 1,
    borderColor: 'red',
  },

  tabbar: {
    height: 50,
    backgroundColor: '#eee',
  },
});

关于我的问题，请查看附件截图。我正在提供包含所有代码的 Snack link。

请注意，当我删除 ScrollView 时，项目会按照我的需要对齐，但删除 ScrollView 不是一个选项。

https://snack.expo.io/SJQnkXGS7

Answer 1

给 ScrollView 或 contentContainer 一个预定义的高度：

<ScrollView contentContainerStyle={styles.container}>

或

<View style={[styles.contentContainer, {height: Dimensions.get('window').height - 396}]}>

React Native 中的 ScrollView 和 justifyContent 问题

ScrollView and justifyContent issue in React Native

scrollview

react-native