反应原生柔性盒不使用所有可用空间

Question

我有一个布局，我想使全屏。这是它现在的样子：

我想要的是布局占用屏幕上的所有空间（所以提交按钮应该在底部）。我正在尝试使用{flex: 1}，但它不起作用。下面的代码：

'use strict'; 

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

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

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.scrollView.getScrollResponder(); 
     scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
     React.findNodeHandle(this.refs[refName]), 
     0, 
     true 
    ); 
    }, 50); 
    }, 

    render: function() { 
    return (
     <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')} 
       style={styles.professor} 
       /> 

      <TextInput multiline={true} 
       underlineColorAndroid={'white'} 
       placeholder={'What do you think?'} 
       ref='post' 
       onFocus={this.onInputFocus.bind(this, 'post')} 
       style={styles.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> 
    ); 
    } 
}); 

const styles = StyleSheet.create({ 
    scroller: { 
    flex: 1, 
    flexDirection: 'column' 
    }, 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'flex-start', 
    backgroundColor: 'white', 
    padding: 5, 
    }, 
    post: { 
    flex: 3 
    }, 
    professor: { 
    flex: 1 
    }, 
    actions: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'flex-end', 
    alignSelf: 'center' 
    }, 
    header: { 
    flex: 1, 
    padding: 5, 
    flexDirection: 'row' 
    }, 
    content: { 
    flex: 4 
    }, 
    footer: { 
    flex: 1 
    } 
}); 

从我所看到的，我设置了柔性财产一路下滑视图层次结构，但仍然没有做任何事情（在顶层是{柔性导航仪：1}）。有什么建议么？

Answer 1

您需要设置一个flexDirection：为最外层的容器“行”属性：

scroller: { 
    flex:1, 
    flexDirection: 'row' 
} 

我已经设置了您的应用程序here的基本版本。代码的其余部分被粘贴下面为全面工作的例子：

https://rnplay.org/apps/gjBqgw

'use strict'; 

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

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

       <View style={styles.actions}> 
       <TouchableHighlight handler={this.handleBackButtonPress} icon={'fontawesome|close'} 
        size={15} width={15} height={15}> 
          <Text>Button Text</Text> 
         </TouchableHighlight> 
       </View> 
      </View> 
      <View style={styles.content}> 
      <Text>Hello from content</Text> 
      </View> 
      <View style={styles.footer}> 
      <TouchableHighlight> 

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

    } 
}); 

const styles = StyleSheet.create({ 
    scroller: { 
    flex:1, 
    flexDirection: 'row' 
    }, 
    container: { 
    flex: 1, 
    backgroundColor: 'white', 
    padding: 5, 
    }, 
    post: { 
    flex: 3 
    }, 
    professor: { 
    flex: 1 
    }, 
    actions: { 
    flex: 1, 
    flexDirection: 'row', 
    alignSelf: 'center' 
    }, 
    header: { 
    flex: 1, 
    padding: 5, 
    flexDirection: 'row' 
    }, 
    content: { 
    flex: 4 
    }, 
    footer: { 
    flex: 1, 
    } 
}); 

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

Answer 2

如果颜色的截图准确，你的滚动视图是占用了所有的垂直空间已经但是容器是不（容器背景颜色是白色的）。这说明了scrollview是如何工作的。它们充当Flex的容器，Flex不能真正使孩子们适应垂直空间，因为它可能是无限的。相反，孩子们在自然的高度呈现。 http://devdocs.io/react_native/scrollview

请尝试使用占用整个屏幕高度的视图。

<View style={styles.container}> 
    ... components here ... 
</View> 
const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'space-between' 
    } 
}) 

Answer 3

你想要的是ScrollView组件的contentContainerStyle支柱。如果更换：

<ScrollView ref='scrollView' style={styles.scroller}> 

有：

<ScrollView ref='scrollView' contentContainerStyle={styles.scroller}> 

这将解决您的问题。

如前所述in the doc：

这些样式将被应用到包装的所有子视图滚动视图内容容器。

希望它有帮助！