React Native：TextInput在放入View时消失

Posted 2023-03-15

【中文标题】React Native：TextInput在放入View时消失

【英文标题】：React Native: TextInput disappears when put into View

【发布时间】：2016-04-18 21:07:34

【问题描述】：

目前我正在借助一本书学习 React Native，其中解释了如何构建一个待办事项应用程序。但是由于此错误/错误，我无法继续。这发生在 ios 中，不确定这是否也发生在 android 上，因为我还没有设置我的 Android 模拟器只是 jet。

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

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

我的两个输入都有宽度和高度 如果没有应用任何样式，输入也会消失 这只会发生在文本输入中，普通文本只会呈现。

一些见解会很棒，我认为这是一个错误，或者我只是忽略了一些东西..

【参考方案1】：

我尝试了您的示例（在 android 上），并且使用您提供的确切代码，屏幕完全是空的。如果文本输入没有样式，它们就不会显示，并且您已将 styles.title 和 styles.body 设置为 TextInput 组件-> 在 styles.title 和 styles.body 中，您没有（两者）宽度和高度。所以你可以做的是：

将width 添加到您的标题和正文样式中

或

为数组中的文本输入添加样式，并为 textInput 和标题/正文应用两种样式，如下所示：style=[styles.textInput, styles.title] 和 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
    

);

【讨论】：

太棒了，感谢您的回答！显然我确实发布了我的旧代码，我同时应用了 styles.textInput 和 styles.body / title，但是，我没有将它们放在一个数组中。

【参考方案2】：

我相信我们读的是同一本书，因为我遇到了同样的问题。

我通过删除 container 样式中的 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,
    
);

【讨论】：

添加 flex:1 如何解决这个问题？

不记得了，我回答这个问题已经快 6 年了。但是，它确实修复了它?‍♂️

【参考方案3】：

如果您的<Text> 在您的<View> 中没有高度，请尝试从您的容器中删除flex : 1。

【参考方案4】：

我用下面的代码解决了：

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