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

如果您使用 position: absolute，您需要指定一個 left:0, right:0 以使其與您當前的設置一起使用，盡管我並不完全確定 position: absolute 是必需的。 嘗試這個：

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

Answer 3

嘗試將removeClippedSubviews={false}設置為屬性，看看會發生什么。