Реагировать на родной TextInput

Question

Я начинаю учиться реагировать на родной язык, поэтому я слежу за документацией, однако не могу проверить TextInput, я копирую пример из официальной документации, но в моем приложении ничего не появляется.
Я также отметил, что когда я добавляю другие компоненты, они не отображаются, однако, когда я удаляю TextInput, они появляются, как и ожидалось.
Я искал в Интернете какое-то решение, я нахожу много, но не работает для меня (в основном говорят о высоте компонента ...).
также нет ошибки ни в приложении, ни в отладчике-графическом интерфейсе
у кого-нибудь есть решение?
Edit1
чтобы начать реагировать, я следовал инструкциям и создал AwsomeProject, Затем в app.js (я также пытался создать отдельный компонент и вызвать его в app.js) я добавил этот код:

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

Answer 1

Я думаю, что добавление flex: 1 и onChangeText в 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 2

Чтобы отобразить ввод текста в пользовательском интерфейсе, необходимо использовать концепцию flex или определить ширину ввода текста.

или

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

Дайте мне знать, если это не прояснит, что вы пытаетесь сделать!

Answer 4

Трудно понять без примера кода, но импортируете ли вы TextInput вверху файла?

import { TextInput } from 'react-native';