反应本机ScrollView的高度

Question

In my ReactNative main page I am trying to make a ScrollView with a multiline TextInput fill the maximum height available, without success.

Here my page code

import React, { Component } from 'react';
import { View, Text, TextInput, Button, ScrollView } from 'react-native';

class App extends Component {

  render() {
    const {
      mainContainerStyle,
      fileNameStyle,
      fileNameInputStyle,
      fileTextStyle,
      saveButtonStyle,
      fileTextScrollViewStyle,
      fileTextScrollViewContentContainerStyle,
      fileTextInputStyle
    } = styles;

    return (
      <View style={mainContainerStyle}>

        <View style={fileNameStyle}>
          <Text>File name :</Text>
          <TextInput
            style={fileNameInputStyle}
            placeholder="MyFileName.txt"
          />
        </View>

        <View style={fileTextStyle}>
          <Text>File text :</Text>
          <ScrollView
            style={fileTextScrollViewStyle}
            contentContainerStyle={fileTextScrollViewContentContainerStyle}
          >
            <TextInput multiline style={fileTextInputStyle} />
          </ScrollView>
        </View>

        <Button
          title="Save into DropBox"
          onPress={() => {}}
          style={saveButtonStyle}
        />

      </View>
    );
  }

}

const styles = {
  mainContainerStyle: {
    flex: 1,
    margin: 10
  },
  fileNameStyle: {
    marginBottom: 5
  },
  fileNameInputStyle: {
    height: 40,
    lineHeight: 20
  },
  fileTextStyle: {
    marginTop: 5,
    flex: 1
  },
  saveButtonStyle: {
  },
  fileTextScrollViewStyle: {
    flex: 1
  },
  fileTextScrollViewContentContainerStyle: {
    flex: 1
  },
  fileTextInputStyle: {
  }
};

export default App;

This is my Playground

Answer 1

愚蠢的错误，实际上我忘记为textInput样式添加“ flex：1”。