React Native 文本输入框

Question

我开始学习React Native，并遵循官方文档，但是无法测试TextInput。我复制了官方文档中的示例，但在我的应用程序中没有任何显示。
我还发现当我添加其他组件时也不会显示，但是当我删除TextInput时，它们会按预期出现。
我在网上搜索了一些解决方案，但没有一个对我有用（主要关于组件高度...）。
应用程序和调试器界面中都没有错误提示。
是否有人有解决方法？
编辑1
为了开始使用React，我按照说明创建了AwsomeProject，然后在app.js中（我还尝试创建了一个单独的组件并在app.js中调用它）添加了以下代码:

   <View style={{ backgroundColor: 'red' }}>
    <TextInput style={{ backgroundColor: '#ededed', height: 60 }} value={'Hello'} />
  </View>

- aName

---

添加一些代码 - Paras Korat

你是否收到了带有红色背景的错误信息？如果是，它显示的是什么？ - Andus

@aName，你所拥有的代码片段应该可以正常工作...但是需要一个灰色背景。 - Hend El-Sahli

Answer 1

没有代码示例很难确定，但你是否在文件顶部导入了TextInput？

修改后的回答："最初的回答"

import { TextInput } from 'react-native';

- Cathal Mac Donnacha

---

就是这么简单，而且我把我的组件命名为TextInput，这让React感到困惑，因此它甚至不显示任何错误消息。 - aName

很高兴听到你解决了它。通常错误消息会更具描述性，比如“ReferenceError：找不到变量：TextInput”。 - Cathal Mac Donnacha

是的，这就是让我困惑的地方，没有任何反馈。 - aName

Answer 2

我认为在textInput中添加flex:1和onChangeText将解决问题。最初的回答。

import * as React from 'react';
import {View, TextInput,Button} from 'react-native';

export default class App extends React.Component {
  state={
    text:"Hello"
  }
  render() {
    return (
        <View style={{ backgroundColor: 'red',flex:1,justifyContent:'center'}}>
          <TextInput style={{ backgroundColor: 'red', height: 60,width:300 ,borderWidth:1,borderColor:"white"}} value={this.state.text} onChangeText={(text) => this.setState({text})}/>
          <Button
           title="Learn More"
           color="#841584"
           accessibilityLabel="Learn more about this purple button"
          />
        </View>
    );
  }
}

- Rajesh Bhartia

Answer 3

这里是最简单使用TextInput的完整代码。

import * as React from 'react'; 
// We have to import the components that we are going to use in our app. 
// TextInput is a part of the 'react-native', which should be already installed if you have followed the official documentation correctly.
import {View, TextInput} from 'react-native';

export default class App extends React.Component { // Our main App component
  render() {
    return (
      <View style={{ backgroundColor: 'red' }}> // The TextInput is in a view. This view has a red background. When you use the link below, you will see a red section at the top of the screen. That is our view.
        <TextInput style={{ backgroundColor: 'red', height: 60 }} value={'Hello'} /> // This is the TextInput component, which has the text "Hello" in it. As you can see, it will be rendered in the parent red view.
      </View>
    );
  }
}

在链接中查看实时示例。

更多信息：React Native上TextInput入门

如果这不能澄清您想要做的事情，请告诉我！

- Fatih Aktaş

Answer 4

要在 UI 上显示文本输入，您需要使用 flex 概念或定义文本输入的宽度。

或者

- Govind Gupta