在 React Native 渲染函数中跳过视图

Question

我正在尝试使用两个 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 包装在一个 View 组件中，并以这种方式将一个borderBottom 添加到 View 的样式中：

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>
);

这些都是我的风格：

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,
 },

});

但是两个 TextInputs 消失了，我不明白为什么 （注：使用 ES6）

Answer 1

注释flexDirection: 'row',这行，就会出现TextInputs。