反应本机TextInput

Question

我开始学习本机反应，因此我遵循文档，但是，我不能测试TextInput，我从正式文档中复制了这个示例，但是我的应用程序中什么也没有出现。

我还注意到，当我添加其他组件时，它们也不会出现，但是，当我删除TextInput时，它们就会像预期的那样出现。

我在网上搜索了一些解决方案，我发现了很多，但是不适合我(主要是讨论组件的高度.)。

此外，在应用程序和调试器-gui中都没有错误。

有谁有解决办法吗？

Edit1

为了开始使用react，我按照指令创建了AwsomeProject，然后在app.js中(我还尝试创建一个分离组件并在app.js中调用它)添加了以下代码：

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

Answer 1

如果没有代码示例，很难知道，但是您是在文件的顶部导入TextInput吗？

import { TextInput } from 'react-native';

Answer 2

我认为通过在onChangeText中添加flex:1和textInput可以解决这个问题

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

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

查看这个链接中的活生生的例子。

更多： 在TextInput上对本地入门做出反应

如果它没有说明你想做什么，请告诉我！