Question

如何获取head组件中的userdata props值？我正在将状态映射到道具，但无法在头部组件中获得该值。如何传递此值。将值传递给高阶组件提供代码可以有人请通过它。我如何将状态映射到头组件中的userdata props值？道具，但无法在头部组件中获得该值。如何传递此值。将值传递给高阶组件提供代码可以有人请仔细阅读

import React from "react";
import {Image, Text, View, ToastAndroid} from "react-native";
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createMaterialTopTabNavigator, createStackNavigator, createAppContainer,DrawerActions} from "react-navigation";
import {Icon} from 'react-native-elements';
import DrawerContent from "./DrawerContent";
import {connect} from "react-redux";
import FirstList from "./FirstList";
import SecList from "./SecList";
import ThirList from "./ThirList";
import color from "../util/Colors";
import DashBoard from "./DashBoard";
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const TabNavigator = createMaterialTopTabNavigator(
{
    FirstList : FirstList ,
    SecList : SecList ,
},
{
    tabBarOptions: {
        labelStyle: {fontSize: 13},
        activeTintColor: color.basecolor,
        inactiveTintColor: 'black',
        scrollEnabled: false,
        style: {
            backgroundColor: 'white',
            height:45
        },
        indicatorStyle: {
            backgroundColor: color.basecolor,
        }
    },
    title: 'Details',
}

);
const StackNavigator1 = createStackNavigator({
TabNavigator: {
    screen: TabNavigator,
    navigationOptions:({navigation})=>{
        return{
            header: (
                <Head/>
            )
        }
    },
},
List: {
    screen: ThirList 
    navigationOptions:({navigation})=>{
        return{
            header: null
        }
    },
},
});
const RootNav = createAppContainer(StackNavigator1);
var name;
class Head extends React.Component {
constructor(props) {
    super(props);
    name='';
    var today = new Date();
    this.state = {
        'date': today.getDate() + " " + monthNames[today.getMonth()] + " " + today.getFullYear()
    };
    console.log(JSON.stringify(this.props)+"userdata");
}

render() {
    const {date} = this.state;
    return (
        <View>
            <View style={{flexDirection: 'row', backgroundColor: color.mainback, height: 40,padding:10}}>
                <Text style={{
                    fontSize: 14,
                    textAlign: 'left',
                    marginLeft: 10,
                    flex:1,
                    color:color.textcolor,
                    fontWeight:'bold',
                    textAlignVertical: "center"
                }}>Orders</Text>
                <Text style={{
                    fontSize: 10,
                    textAlign: 'right',
                    marginLeft: 20,
                    marginRight: 20,
                    fontWeight: 'bold',
                    color:color.datetextcolor,
                    textAlignVertical: "center"
                }}>{date}</Text>
            </View>

        </View>
    );
}

}

class RootScreen extends React.Component {
render() {
    return (
        <View style={{flex: 1}}>
            <RootNav/>
        </View>
    );
}
}

const StackNavigator = createStackNavigator({
    DrawerNavigator: {
        screen: RootScreen,
        activeTintColor: color.basecolor,
        navigationOptions: ({navigation}) => ({title: 'Home'}, {
                headerLeft:
                    <View style={{flexDirection: 'row', marginLeft: 20}}>
                        <Icon name="menu" onPress={()=>navigation.dispatch(DrawerActions.toggleDrawer())} size={30} color="white"/>
                        <Image source={require('../images/logo.png')}
                               style={{height: 35, width: 150, resizeMode: 'contain'}}/>
                    </View>,
            }
        ),
    },
    Dashboard: {
        screen: DashBoard,
        navigationOptions: {
            headerTitle: (
                <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
                    <View style={{flex: 1, justifyContent: 'center'}}>
                        <Image
                            source={require('../images/logo.png')}
                            style={{height: 35, width: 150, marginLeft: -20, resizeMode: 'contain'}}
                        />
                    </View>
                </View>
            ),
        },
    },
}, {

    defaultNavigationOptions: {
        headerTintColor: 'white',
        headerStyle: {
            backgroundColor: color.basecolor,
        },
    }
}
);

const DrawerNavigator = createDrawerNavigator(
{
    Home: StackNavigator
},
{
    contentComponent: DrawerContent,
    drawerWidth: 280,
    navigationOptions: {
        header: null
    },

}
);
function mapStateToProps(state) {
return {
    userdata: state.auth.userdata
}
}
export default connect(mapStateToProps) (DrawerNavigator);

Answer 1

您的目标是将 Head 组件连接到 Redux Store ，对吗？

仅使用connect（）函数就足够了。解决方案是添加以下代码行。

const NewHead = connect(mapStateToProps)(Head)

在 StackNavigator1

中将<Head/>替换为<NewHead/>

然后，以以下方式访问 Head 组件中的数据。

this.props.userdata

OR

如果要在导航至路线时将数据传递给路线，则可以参考此documentation。

如何通过抽屉导航器获得道具的价值

1 个答案: