React Native 滚动视图未显示

Question

我在视图层次结构的顶层有一个滚动视图。我试图让它显示它的内容，但我没有任何运气。

我看到文档说滚动视图需要有界的高度才能工作。我似乎无法让它有一个有界的高度。这是我目前所拥有的。

'use strict';

const React = require('react-native');
const {
  StyleSheet,
  Text,
  View,
  BackAndroid,
  TextInput,
  TouchableNativeFeedback,
  ScrollView
} = React;

const ActionButton = require('./action-button'),
    Dimensions = require('Dimensions');

module.exports = React.createClass({
  handleBackButtonPress () {
    if (this.props.navigator) {
      this.props.navigator.pop();
      return true;
    }

    return false;
  },

  componentWillMount () {
    BackAndroid.addEventListener('hardwareBackPress', this.handleBackButtonPress);
  },

  componentWillUnmount () {
    BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButtonPress);
  },

  onInputFocus (refName) {
    setTimeout(() => {
      let scrollResponder = this.refs.getScrollResponder();
      scrollResponder.scrollNativeHandleToKeyboard(
        React.findNodeHandle(this.refs[refName]),
        110,
        true
      );
    }, 50);
  },

  render: function() {
    return (
      <View style={styles.scrollWrapper}>
        <ScrollView ref='scrollView' style={styles.scroller}>
          <View style={styles.container}>
            <View style={styles.header}>
              <Text>New Post</Text>

                <View style={styles.actions}>
                  <ActionButton handler={this.handleBackButtonPress} icon={'fontawesome|close'}
                    size={15} width={15} height={15} />
                </View>
            </View>
            <View style={styles.content}>
              <TextInput underlineColorAndroid={'white'}
                placeholder={'Who\'s your professor?'}
                ref='professor'
                onFocus={this.onInputFocus.bind(this, 'professor')}
                />

              <TextInput multiline={true}
                underlineColorAndroid={'white'}
                placeholder={'What do you think?'}
                ref='post'
                onFocus={this.onInputFocus.bind(this, 'post')}
                />
            </View>
            <View style={styles.footer}>
              <TouchableNativeFeedback
                background={TouchableNativeFeedback.SelectableBackground()}>

                <View style={{width: 50, height: 25, backgroundColor: 'green'}}>
                  <Text>Submit</Text>
                </View>
              </TouchableNativeFeedback>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
});

const styles = StyleSheet.create({
  scrollWrapper: {
    flex: 1
  },
  scroller: {
    flex: 1
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    backgroundColor: 'white',
    padding: 5,
  },
  post: {
    flex: 1,
  },
  actions: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignSelf: 'center'
  },
  header: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 35,
    padding: 5,
    flexDirection: 'row'
  },
  content: {
    flex: 1,
    position: 'absolute',
    top: 35
  },
  footer: {
    flex: 1,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 35
  }
});

编辑：所以我将所有组件的背景颜色更改为明显的颜色。我能够简化视图，所以现在 ScrollView 是组件的根。容器视图（ScrollView 的直接子视图）是没有填满所有可用空间的视图。我仍在玩弄它，但非常感谢任何帮助。

Answer 1

要解决此问题，您需要将flex: 1 设置为父视图。然后，对于 ScrollView，使用 contentContainerStyle={{flexGrow: 1}} 而不是使用样式。

<View style={{flex: 1}}>
  <ScrollView contentContainerStyle={{flexGrow: 1}}>
     ...
  </ScrollView>
</View>

Answer 2

尝试将removeClippedSubviews={false} 设置为的属性，看看会发生什么。

Answer 3

如果您使用 position: absolute，您需要指定 left:0, right:0 以使其与您当前的设置一起使用，尽管我不完全确定 position: absolute 是否需要。试试这个：

content: {
    flex: 1,
    position: 'absolute',
    top: 35,
    left:0,
    right:0,
    bottom:0
},