есть ли способ исправить проблему с чатом на устройстве Android?

Я пытаюсь использовать в своем проекте 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: введите здесь описание изображения введите здесь описание изображения


react-native react-native-android shoutem
person Chu Việt Hưng    schedule 16.05.2017    source источник
comment
Попробуйте добавить width:'100%' в стиль ввода текста. может быть, это сработает.   -  person Sagar Khatri    schedule 16.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

Если я не ошибаюсь, вы никогда не указываете ширину для своих компонентов 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% }}
/>
person Vladimir Vdović    schedule 16.05.2017