Create a view that grows with content and when it hits the screen height begins scrolling with react native?

Question

I want to build a box with a list of elements using react native. I want the box to grow as more elements are added and once the box is a tall as the device screen the contents of the box become scrollable. That way I can have a header and footer always on screen.

In other words, I want a container to fit it's contents and if there is more content than will fit on the screen, I want the container to be scrollable.

Is that possible?

Here is a rnplay: https://rnplay.org/apps/KrOk6w

This is what I want to happen with more items than will fit on the screen:

This is what I DO want to happen with only a few items:

This is what I DO NOT want to happen with only a few items:

Here's the code I'm using in this example, You can change rowCount to increase the rows.

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

为容器视图设置一个属性： justify-content: flex-start

Answer 2

使用flexGrow: 0 ，否则即使没有内容， ScrollView 也会占用所有可用的高度。

Answer 3

You should keep content by using props. assume that there are two files, index.ios.js and 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;

screenshots:

top:

bottom: