Question

我尝试在我的项目中使用shoutem / ui！我创建了一个用于登录/注册的组件，它在iOS中运行良好，但在android我有问题，如下图所示，这是我的代码：

 <Screen
                style={{
                    backgroundColor: '#2ecc71'
                }}
            >
                <StatusBar
                    barStyle="light-content"
                />
                <NavigationBar
                    styleName="no-border"
                    style={{
                        container: {
                            position: 'relative',
                            width: Dimensions.get('window').width,
                            backgroundColor: '#2ecc71'
                        }
                    }}
                />
                <View
                    style={{
                        alignItems: 'center',
                        flexGrow: 1,
                        justifyContent: 'center',
                    }}
                >
                    <Divider />
                    <Image
                        styleName="medium-square"
                        source={require('../images/logo.png')}
                    />
                    {this.renderSpinner()}
                    <Divider />
                    <TextInput
                        placeholder={'Username or email'}
                        editable={!this.state.statusButton}
                        onChangeText={(text) => this.setState({ email: text })}
                        keyboardType="email-address"
                        autoCapitalize="none"
                        autoCorrect={false}
                    />
                    <Divider styleName="line" />
                    <TextInput
                        editable={!this.state.statusButton}
                        onChangeText={(text) => this.setState({ password: text })}
                        placeholder={'Password'}
                        secureTextEntry
                        autoCapitalize="none"
                    />
                    <Divider />
                    <View styleName="horizontal flexible">
                        <Button
                            disabled={this.state.statusButton}
                            styleName="full-width confirmation"
                            onPress={this.onLoginPressed.bind(this)}
                        >
                            <Text>LOGIN</Text>
                        </Button>
                        <Button
                            disabled={this.state.statusButton}
                            styleName="full-width confirmation"
                            onPress={this.goToRegister.bind(this)}
                        >
                            <Text>REGISTER</Text>
                        </Button>
                    </View>
                </View>
            </Screen>

这里是结果iOS / android：

Answer 1

如果我没弄错，你永远不会为TextInput组件指定宽度。

<TextInput
    placeholder={'Username or email'}
    editable={!this.state.statusButton}
    onChangeText={(text) => this.setState({ email: text })}
    keyboardType="email-address"
    autoCapitalize="none"
    autoCorrect={false}
/>

<TextInput
    editable={!this.state.statusButton}
    onChangeText={(text) => this.setState({ password: text })}
    placeholder={'Password'}
    secureTextEntry
    autoCapitalize="none"
/>

默认情况下，在iOS上看起来TextInput会延伸到最大屏幕宽度，但在Android上它会缩小，就像你在自己的截图中看到的一样。

添加宽度，你应该很高兴。

<TextInput
    placeholder={'Username or email'}
    editable={!this.state.statusButton}
    onChangeText={(text) => this.setState({ email: text })}
    keyboardType="email-address"
    autoCapitalize="none"
    autoCorrect={false}

    style={{ width: 100% }}
/>

有没有办法解决Android设备中的问题shoutem

1 个答案: