我更新了Expo,并在“连接屏幕”中收到以下消息,该消息应根据用户是否连接来更改屏幕标题。
该错误来自此行:
headerTitle: connect((state) => ({ children: this.getTitle(state) }))(Text)
错误:
You must pass a component to the function returned by connect. Instead received {"propTypes":{}}
之前效果很好,所以我不知道发生了什么。
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Logo from '../components/Logo';
import Form from '../components/Form';
import Wallpaper from '../components/Wallpaper';
import ButtonSubmit from '../components/ButtonSubmit';
import SignupSection from '../components/SignupSection';
import { Router, Scene, Actions, ActionConst } from 'react-native-router-flux';
import ErrorMessage from '../components/ErrorMessage';
import Dimensions from 'Dimensions';
import {StyleSheet, View, Text, Image, KeyboardAvoidingView} from 'react-native';
import {connect} from "react-redux";
import {ifIphoneX} from 'react-native-iphone-x-helper'
import logoImg from '@assets/images/logo.png';
class ConnexionScreen extends React.Component {
constructor(props) {
super(props);
getTitle=(state)=>{{
if(state.login.status){
return 'MON COMPTE'
}
return 'CONNEXION'
}
}
}
handleSubmit() {
console.log(this.loginform);
}
static navigationOptions = {
headerTitle: connect((state) => ({ children: this.getTitle(state) }))(Text),
headerTintColor: 'white',
headerStyle: {
backgroundColor: '#000',
...ifIphoneX({marginTop:-55}),
},
headerTitleStyle: {
fontWeight: 'bold'
},
};
render() {
const { navigation, login } = this.props;
const { status, email} = login;
return (
status === 0 ? (
<Wallpaper>
<KeyboardAvoidingView style={styles.container} behavior="position" enabled>
<View style={{flex:1,flexDirection:"row",alignItems:"center", justifyContent:"center"}}>
<Image source={logoImg} style={styles.image} />
</View>
<ErrorMessage />
<Form />
<ButtonSubmit />
<View style={styles.OrContainer}>
<Text style={styles.Ortext}>ou</Text>
</View>
<View style={styles.buttonContainer}>
<Text style={styles.buttonText} onPress={()=>this.props.navigation.navigate("VIP")}>
DEVENIR VIP
</Text>
</View>
<View style={{height:50}}></View>
</KeyboardAvoidingView>
</Wallpaper>) :
(
<Wallpaper>
<View style={{ flex: 1,flexDirection: "column",justifyContent: "center",alignItems: "center"}}>
<View style={{height:200}}>
<Logo />
</View>
<View>
<Text style={{ color: "rgba(255,204,51, 1)",fontSize: 18,fontFamily: "oswald-demi-bold"}}> {`Email : ${email}`}</Text>
<Text style={{color:'#fff',fontSize: 18,color: "rgba(255,255,255, 1)", textAlign:"center"}} onPress={() => this.props.logout()}> {`Logout`}</Text>
</View>
</View>
</Wallpaper>
)
);
}
}
const mapStateToProps = ({login}) => ({login});
const mapDispatchToProps = (dispatch) => {
const loginAction = require('@redux/LoginRedux').default
return {
logout: () => dispatch(loginAction.logout()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ConnexionScreen)
我得到的错误...任何帮助将不胜感激!
You must pass a component to the function returned by connect. Instead received {"propTypes":{}}
wrapWithConnect
connectAdvanced.js:101:29
<unknown>
ConnexionScreen.js:32:74
loadModuleImplementation
require.js:292:12
<unknown>
MainTabNavigator.js:17
loadModuleImplementation
require.js:292:12
<unknown>
RootNavigation.js:6
loadModuleImplementation
require.js:292:12
<unknown>
App.js:5
loadModuleImplementation
require.js:292:12
<unknown>
AppEntry.js:2
loadModuleImplementation
require.js:292:12
guardedLoadModule
require.js:179:45
global code
<unknown file>:0