react-native - 有没有办法解决android设备中的问题

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% }}
/>