创建一个随内容增长的视图,当它达到屏幕高度时开始滚动with react native？

Question

我想使用react native来构建一个包含元素列表的框.我希望盒子随着更多元素的添加而增长,并且一旦盒子高,因为设备屏幕盒子的内容变得可滚动.这样我就可以在屏幕上显示页眉和页脚.

换句话说,我想要一个容器来容纳它的内容,如果有更多的内容适合屏幕,我希望容器可以滚动.

那可能吗？

这是一个rnplay:https://rnplay.org/apps/KrOk6w

这是我想要的更多项目,而不是适合屏幕:

这是我想要发生的只有几个项目:

这是我不想发生的只有几个项目:

这是我在此示例中使用的代码,您可以更改rowCount以增加行.

var React = require('react-native');

var {
    View,
    Text,
    StyleSheet,
    ScrollView,
} = React;

var styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        flexDirection: 'column',
        backgroundColor: "blue",
    },
    contentContainer: {
    },
    headerContainer: {
        padding: 20,
        backgroundColor: "#EEE",
    },
    footerContainer: {
        padding: 20,
        backgroundColor: "#EEE",
    },
    rowContainer: {
        borderTopWidth: 1,
        borderColor: "#EEE",
        padding: 30,
        backgroundColor: "red",
    },
});

class Test extends React.Component {
    render() {
        var rowCount = 20;
        var rows = [];
        for(i = 0; i < rowCount; i++) {
            rows.push(<View style={styles.rowContainer}>
                <Text>
                    {"Some text"}
                </Text>
            </View>);
        }
        return (
            <View style={styles.container}>
                <View style={styles.headerContainer}>
                    <Text>
                        {"Header text"}
                    </Text>
                </View>
                <ScrollView
                    contentContainerStyle={styles.contentContainer}>
                    {rows}
                </ScrollView>
                <View style={styles.footerContainer}>
                    <Text>
                        {"Footer text"}
                    </Text>
                </View>
            </View>
        );
    }
};

module.exports = Test;

Answer 1

您应该使用道具来保留内容。假设有两个文件，index.ios.js并且test.js.

index.ios.js：

'use strict';

var React = require('react-native');
var Test = require('./test');
var {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} = React;

class PNTest extends React.Component{
  constructor(props){
    super(props)
  }

  render(){
    var content = [<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, 
                  <Text style={styles.welcome}>Text 2</Text>]; 

    return(
      <Test content={content}/>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  buttonContainer: {
    backgroundColor: 'blue',
    padding: 10,
    margin: 10,
  },
  button: {
    textAlign: 'center',
    color: 'white',
    fontSize: 20,
  },
});

AppRegistry.registerComponent('PNTest', () => PNTest);

test.js：

'use strict';

var React = require('react-native');

var {
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  ScrollView
} = React;

class Test extends React.Component{
  constructor(props){
    super(props)

    var _content = (<ScrollView
        automaticallyAdjustContentInsets={false}
        horizontal={false}
        style={styles.scrollView}>
          <View style={styles.container}>
            {this.props.content}
          </View>
        </ScrollView>);

    this.state = {
      content: _content
    }
  }

  render(){
    return(
      this.state.content
    );
  }
}


var styles = StyleSheet.create({
  container: {
    margin: 30,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  buttonContainer: {
    backgroundColor: 'blue',
    padding: 10,
    margin: 10,
  },
  button: {
    textAlign: 'center',
    color: 'white',
    fontSize: 20,
  },
  scrollView: {
    backgroundColor: '#6A85B1',
    height: 300,
  },
});

module.exports = Test;

截图：

顶部：

底部：