使用可能なすべてのスペースを使用しているネイティブフレックスボックスに反応します

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}も同様）。助言がありますか？最も外側の容器のための「行」プロパティ：私はあなたのアプリケーションhereの基本的なバージョンを設定している

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

Answer 1

あなたがflexDirectionを設定する必要があります。コードの残りの部分は完全な作業例については、以下を貼り付けられます：色はスクリーンショットに正確である場合

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はすでに、すべての垂直方向のスペースを取っているが、コンテナがありますそうではありません（コンテナの背景色は白です）。これは、スクロールビューの動作を示しています。彼らは、潜在的に無限であるので、フレックスが実際に垂直空間にフィットするように子どもを成長させることができないコンテナとして機能します。代わりに、子供たちは自然な高さでレンダリングされます。 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を次のように述べています

これらのスタイルは、子ビューのすべてをラップスクロールビューのコンテンツコンテナに適用されます。

希望すると助かります！