React Native Router样式问题登录表单字段堆叠IOS模拟器

Question

我有一个LoginForm组件，如果没有react-native-flux使用，则显示正常，如下图所示。

但是，如果通过Router的{​​{1}}和Scene组件显示相同的组件，则所有字段都会叠加，如下所示。

以下是我的react-native-router-flux文件的代码

Router.js

import React from 'react'; import { Scene, Router, Stack } from 'react-native-router-flux'; import LoginForm from './components/LoginForm'; const RouterComponent = () => { return ( <Router sceneStyle={{ paddingTop: 65, marginTop: 20 }}> <Stack key="root"> <Scene key="login" component={LoginForm} title="Please Login" /> </Stack> </Router> ); }; export default RouterComponent;

LoginForm.js

以下是应用于import React, { Component } from 'react'; import { Text } from 'react-native'; import { connect } from 'react-redux'; import { Button, Card, CardSection, Input, Spinner } from './common'; import { emailChanged, passwordChanged, loginUser } from '../actions'; class LoginForm extends Component { onEmailChange(text) { this.props.emailChanged(text); } onPasswordChange(text) { this.props.passwordChanged(text); } onButtonPress() { const { email, password } = this.props; this.props.loginUser({ email, password }); } onLoginSuccess() { this.setState({ email: '', password: '', loading: false, error: '' }); } onLoginFail() { this.setState({ error: 'Authentication Failed.', loading: false }); } renderButton() { if(this.props.loading) { return <Spinner size="large" />; } return ( <Button onPress={this.onButtonPress.bind(this)}> Log In </Button> ); } render() { return ( <Card> <CardSection> <Input placeholder="example@example.com" label="Email" value={this.props.email} onChangeText={this.onEmailChange.bind(this)} /> </CardSection> <CardSection> <Input secureTextEntry placeholder="password" label="Password" value={this.props.password} onChangeText={this.onPasswordChange.bind(this)} /> </CardSection> <Text style={styles.errorStyle}> {this.props.error} </Text> <CardSection> {this.renderButton()} </CardSection> </Card> ); } } const styles = { errorStyle: { fontSize: 20, alignSelf: 'center', color: 'red' } }; const mapStateToProps = ({ auth }) => { const { email, password, error, loading } = auth; return { email, password, error, loading }; }; export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser })(LoginForm);

的样式

Input

以下是应用于const styles = { inputStyle: { color: '#000', paddingRight: 5, paddingLeft: 5, fontSize: 18, lineHeight: 23, flex: 2 }, labelStyle: { fontSize: 18, paddingLeft: 20, flex: 1 }, containerStyle: { height: 40, flex: 1, flexDirection: 'row', alignItems: 'center' } }

的样式

CardSection

以下是适用于'Card`

的样式

const styles = {
    containerStyle: {
        borderBottomWidth: 1,
        padding: 5,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        borderColor: '#ddd',
        position: 'relative'
    }
};

我尝试了各种方法，但没有用。我帮助你解决这个问题。