リアクションをスキップするネイティブレンダリング機能

Question

2つのTextInputコンポーネントでビューをレンダリングしようとしています。 これは私のレンダリング機能である：

render() { 
    return (
    <View style={styles.container}> 

    <TextInput ref='title' 
       placeholder="Untitled" 
       style={styles.textInput, styles.title} 
       autoFocus={true} 
       onSubmitEditing={(event) => {this.refs.body.focus()}} 
       /> 



    <TextInput ref='body' 
     autoFocus={true} 
     multiline={true} 
     placeholder="Start typing" 
     style={styles.textInput, styles.body} 
     /> 

    </View> 
); 

さて、私はそれぞれのTextInputの下にアンダーラインを追加したいと思います。そのために、私は、ビューコンポーネント内の各TextInputsを包んだし、このようにビューのスタイルにborderBottomを追加：

var styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    marginTop: 64 
}, 
    title: { 
    height: 40 
    }, 
    body: { 
    flex: 1 
    }, 

inputContainer: { 
    borderBottomColor: '#9E7CE3', 
    borderBottomWidth: 1, 
    flexDirection: 'row', 
    marginBottom: 10 
}, 

textInput: { 
    flex: 1, 
    fontSize: 16, 
}, 

}); 

：これらはすべて私のスタイルです

render() { 
    return (
    <View style={styles.container}> 
    <View style={styles.inputContainer}> 
    <TextInput ref='title' 
       placeholder="Untitled" 
       style={styles.textInput, styles.title} 
       autoFocus={true} 
       onSubmitEditing={(event) => {this.refs.body.focus()}} 
       /> 
    </View> 

    <View style={styles.inputContainer}> 
    <TextInput ref='body' 
     autoFocus={true} 
     multiline={true} 
     placeholder="Start typing" 
     style={styles.textInput, styles.body} 
     /> 
    </View> 
    </View> 
); 

しかし、2つのTextInputが消えて、なぜわかりません （注：ES6を使用）

Answer 1

コメントflexDirection: 'row',とTextInputsが表示されます。