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下添加一个下划线。为了做到这一点，我将每个TextInput包装在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。

在React Native渲染功能中跳过视图

1 个答案: