Реагируйте на нативные элементы, которые не отображаются должным образом - PullRequest
Новая
       12

Реагируйте на нативные элементы, которые не отображаются должным образом

0 голосов
/ 05 октября 2019

Я только начинаю с React Native. Я создал новое приложение, используя expo.io, и в настоящее время тестирую компоненты, предоставленные https://react -native-elements.github.io

Я пытаюсь использовать формы ввода и кнопкикод в настоящее время выглядит так: 

class EnterNewPasswordComp extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            pass : ''
        }
    }

    render() {
        return <View style={styles.container}>
            <Text style={styles.label}>{pass_label}</Text>
            <Input placeholder='Password' />
            <Text style={styles.note}>{pass_desc}</Text>
            <Button title="Submit" type="outline" />
        </View>;
    }
}

const styles = {
  container : {
      flex : 1,
      justifyContent: 'center',
      alignItems: 'center',
  },
  label : {
      fontSize: 20,
  },
  note : {
      fontSize: 12,
      marginBottom: 20
  },
  input : {
      color : style.txtcolor
  },
  btn : {
      width : '50%'
  }
};

компонент (в настоящее время) возвращает только EnterNewPasswordComp 

class IndexComponent extends React.Component {

    constructor(props) {
        super(props);
        this.passDao = Factory.getPasswordDao();
        this.state = {
            status: 'initializing'
        }
    }

    async componentDidMount() {
        try {
            const pass = await this.passDao.getPassword();
            logger.info(pass);
            const setupNeeded = pass === null;
            if( setupNeeded ) {
                this.setState({
                    status : 'setup'
                });
            }
            else {
                this.setState({
                    status : 'ready'
                })
            }
        } catch (e) {
            logger.error("Error during db query", e);
            this.setState({
                status: 'corrupted'
            });
        }
    }

    render() {
        let msg = "initializing";

        switch (this.state.status) {
            case 'initializing':
                msg = 'initializing';
                break;
            case 'corrupted':
            default:
                msg = 'corrupted';
                break;
            case 'ready':
                msg = 'ready';
                break;
            case 'setup':
                return <EnterNewPasswordComp/>
        }

        return <Text>{msg}</Text>
    }
}

, и этот компонент используется в моих файлах App.js следующим образом: 

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <IndexComponent/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Вот так выглядит мой вывод на моем телефоне Android:

Application Screenshot

Обратите внимание:

  • Поле ввода не рендерится вообще
  • Схема типа кнопки не подобрана правильно
  • Ширина кнопки выбрана неправильно

Я играл сстили (например, установка цвета формы ввода, подозрение, что он может совпадать с фоном), но ничего не изменилось. Мне интересно, делаю ли я что-то принципиально неправильное, чтобы вызвать эти проблемы.

...