javascript - React Native 元素未按预期呈现

Question

我刚刚开始使用 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 手机上的样子：

注意：

• 输入字段根本不呈现
• 未正确拾取按钮类型轮廓
• 按钮宽度未正确拾取

我玩弄了这些样式（比如设置输入表单的颜色，怀疑它可能与背景相同），但没有任何改变。我想知道我是否在做一些根本错误的事情来产生这些问题。