我有一个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'
}
};
我尝试了各种方法,但没有用。我帮助你解决这个问题。