React Native：TextInput在放入视图时消失

当前我正在学习React Native，并在书籍的帮助下解释了如何构建应用程序。但是由于这个错误/错误，我无法继续。这发生在IOS，不知道这是否也发生在Android上，因为我没有设置我的Android模拟器只是喷气式飞机。React Native：TextInput在放入视图时消失

我的<View>集装箱有两个<TextInputs>，工作正常。当我将两个输入封装到视图中时，它们只是“消失”。

这里是我的组件NoteScreen.js：

import React, { 
    Component, 
    StyleSheet, 
    TextInput, 
    View 
} from 'react-native'; 

export default class NoteScreen extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="title" 
         autoFocus={true} 
           autoCapitalize="sentences" 
      placeholder="Untitled" 
      style={styles.title} 

      onEndEditing={(text) => {this.refs.body.focus()}} 
      /> 
     </View> 
     <View style={styles.inputContainer}> 
      <TextInput 
      ref="body" 
      multiline={true} 
      placeholder="Start typing" 
      style={styles.body} 

      textAlignVertical="top" 
      underlineColorAndroid="transparent" 
      /> 
     </View> 
     </View> 
     ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     marginTop: 64 
    }, 
    textInput: { 
     color: '#ffffff', 
     flex: 1, 
     width: 60, 
     height: 60, 
     fontSize: 16 
    }, 
    inputContainer: { 
     borderBottomColor: '#9E7CE3', 
     borderBottomWidth: 1, 
     flex: 1, 
     flexDirection: 'row', 
     marginBottom: 10 
    }, 
    title: { 
     fontFamily: 'Overpass-Bold', 
     height: 40 
    }, 
    body: { 
     fontFamily: 'Overpass-Bold', 
     flex: 1 
    } 
});

我做了一些研究，发现了一些奇怪的事情;

我输入两者有一个宽度和高度
的输入也消失了，如果他们没有应用任何样式
这仅与文本输入发生，正常的文本只是渲染。

一些有识之士将是巨大的，我想这是一个错误，或者我只是俯瞰东西..

来源

2016-04-18 Fabian Tjoe A On

我想你的例子（机器人），并用精确的代码，你提供的，屏幕是完全空的。如果没有文本输入样式，它们不会显示，并且您已将styles.title和styles.body设置为TextInput组件 - > styles.title和styles.body中没有（宽度和高度）。所以你可以做的是：

添加width你的标题和正文风格

或

样式添加到文本的数组输入和TextInput和为标题适用这两种风格/ body like this：style={[styles.textInput, styles.title]} and style={[styles.textInput, styles.body]}

这里是工作代码这两个建议，我给你：

import React, { 
AppRegistry, 
    Component, 
    StyleSheet, 
    TextInput, 
    View 
} from 'react-native'; 

export default class NoteScreen extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="title" 
         autoFocus={true} 
         autoCapitalize="sentences" 
         placeholder="Untitled" 
         style={styles.title} 

         onEndEditing={(text) => {this.refs.body.focus()}} 
        /> 
       </View> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="body" 
         multiline={true} 
         placeholder="Start typing" 
         style={[styles.textInput, styles.body]} 

         textAlignVertical="top" 
         underlineColorAndroid="transparent" 
        /> 
       </View> 
      </View> 
     ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     marginTop: 64 
    }, 
    textInput: { 
     color: '#ffffff', 
     flex: 1, 
     width: 60, 
     height: 60, 
     fontSize: 16 
    }, 
    inputContainer: { 
     borderBottomColor: '#9E7CE3', 
     borderBottomWidth: 1, 
     flex: 1, 
     flexDirection: 'row', 
     marginBottom: 10 
    }, 
    title: { 
     fontFamily: 'Overpass-Bold', 
     height: 40, 
     width: 40 
    }, 
    body: { 
     fontFamily: 'Overpass-Bold', 
     flex: 1 
    } 

});

来源

2016-04-19 07:57:55 Vikky

真棒，谢谢您的回答！ Apperently我没有发布我的旧代码，我有styles.textInput和styles.body/title应用，但是，我没有把它们放在一个数组中。 –

不客气！我很高兴你解决了它！:) – Vikky

谢谢你好先生！ – Trip

我相信，我们正在读同一本书，becausee我有同样的问题。

我通过在容器风格去除alignItems: 'center'和添加flex: 1到inputContainer风格的解决了这个问题。它看起来仍然不像书本样本，但至少现在可以看到这些字段。

这里是我的代码如下所示：

import React, { StyleSheet, Text, TextInput, View } from "react-native"; 
import dismissKeyboard from "dismissKeyboard"; 

export default class NoteScreen extends React.Component { 

    render() { 
     handleTitleEditingEnd = (text) => { this.refs.body.focus(); }; 

     return (
      <View style={styles.container}> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="title" 
         placeholder="Untitled" 
         style={[styles.textInput, styles.title]} 
         onEndEditing={handleTitleEditingEnd} 
         returnKeyType="next" 
        /> 
       </View> 
       <View style={styles.inputContainer}> 
        <TextInput 
         ref="body" 
         multiline={true} 
         placeholder="Start typing" 
         style={[styles.textInput, styles.body]} 
        /> 
       </View> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: "center", 
     // alignItems: "center", 
     marginTop: 64 
    }, 
    inputContainer: { 
     borderBottomColor: "#9E7CE3", 
     borderBottomWidth: 1, 
     flexDirection: "row", 
     marginBottom: 10, 
     flex: 1, 
    }, 
    textInput: { 
     flex: 1, 
     fontSize: 16, 
    }, 
    title: { 
     height: 40, 
    }, 
    body: { 
     flex: 1, 
    } 
});

来源

2016-04-30 19:55:14

我用下面的代码解决了这个问题：

import React, { 
    StyleSheet, 
    TextInput, 
    View 
} from 'react-native'; 

export default class NoteScreen extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.inputContainer}> 
      <TextInput ref="title" autoFocus={true} autoCapitalize="sentences" placeholder="Untitled" style={[styles.textInput, styles.title]} onEndEditing={(text) => {this.refs.body.focus()} }/> 
     </View> 
     <View style={styles.inputContainer}> 
      <TextInput ref="body" multiline={true} placeholder="Start typing" style={[styles.textInput, styles.body]}/> 
     </View> 
     </View> 
    ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    marginTop: 64 
    }, 
    title: { 
    height: 40 
    }, 
    body: { 
    height: 160, 
    flex: 1 
    }, 
    inputContainer: { 
    borderBottomColor: '#9E7CE3', 
    borderBottomWidth: 1, 
    flexDirection: 'row', 
    marginBottom: 10 
    }, 
    textInput: { 
    flex: 1, 
    fontSize: 16, 
    width: 300, 
    } 
});

来源

2016-06-05 02:51:58 Synix

React Native：TextInput在放入视图时消失

回答

相关问题