React Navigation 如何将 props 传递给 TabNavigator 无状态功能组件

Posted 2023-02-23

【中文标题】React Navigation 如何将 props 传递给 TabNavigator 无状态功能组件

【英文标题】：React Navigation how to pass props to TabNavigator Stateless Functional Components

【发布时间】：2017-11-17 10:07:17

【问题描述】：

我正在学习使用 React Navigation 并喜欢它，但不知道如何将 props 从我的*** App 组件发送到我的屏幕组件。我可能（很可能）以完全错误的方式去做。这是我的代码。

主应用组件

class App extends Component 
    constructor(props) 
        super(props);

        this.state = 
            signedIn: false,
            checkedSignIn: false
        ;
    

    componentWillMount() 
        isSignedIn()
            .then(res => this.setState( signedIn: res, checkedSignIn: true ))
            .catch(err => alert(err));
    

    render() 
        const  checkedSignIn, signedIn  = this.state;

        if (!checkedSignIn) 
            return null;
        

        if (signedIn) 
            console.log("yeah boi");
            console.log(SignedOut);
            return (
                <Provider store=store>
                    <SignedIn screenProps=(name = "TestName") />
                </Provider>
            );
         else 
            console.log("nah bro");
            return (
                <Provider store=store>
                    <SignedOut />
                </Provider>
            );
        
    

屏幕

export default ( navigation ) =>
    <View style= paddingVertical: 20 >
        <Card title="John Doe">
            <View
                style=
                    backgroundColor: "#bcbec1",
                    alignItems: "center",
                    justifyContent: "center",
                    width: 80,
                    height: 80,
                    borderRadius: 40,
                    alignSelf: "center",
                    marginBottom: 20
                
            >
                <Text style= color: "white", fontSize: 28 >JD</Text>
            </View>
            <Button
                title="SIGN OUT"
                onPress=() =>
                    onSignOut().then(() => navigation.navigate("SignedOut")) // NEW LOGIC
            />
        </Card>
    </View>;

导航

export const SignedIn = TabNavigator(
    Tasks: 
        screen: Tasks,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name="list" size=30 />
        
    ,
    Home: 
        screen: Home,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name="home" size=30 />
        
    ,
    Message: 
        screen: Message,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name="envelope-letter" size=30 />
        
    ,
    Profile: 
        screen: Profile,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name="user" size=30 />
        
    
);

谁能告诉我如何将道具（例如我尝试的 (name = "TestName")）传递给 SignedIn SFC？

我是新手，所以请温柔:)

谢谢 山姆

【参考方案1】：

我认为<SignedIn screenProps=(name = "TestName") /> 会出现语法错误。它应该只是<SignedIn name='TestName' />。更大的问题是你如何使用TabNavigator 组件。如果您尝试以下操作会怎样：

export const SignedIn = ( name ) => TabNavigator(
    Tasks: 
        screen: Tasks,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name= name  size=30 />
        
    ,
    Home: 
        screen: Home,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name= name  size=30 />
        
    ,
    Message: 
        screen: Message,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name= name  size=30 />
        
    ,
    Profile: 
        screen: Profile,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name= name  size=30 />
        
    
);

【讨论】：

感谢 Krasimir，但它不是 SimpleIcons 组件，我也希望传递道具，它是示例中的配置文件屏幕

【参考方案2】：

使用 React Navigations screenProps 参数对其进行排序，同时仍保持项目无状态。只需在 Nav 组件中修复我的语法并在我的屏幕中显式调用 screenProps。供参考：

主应用

class App extends Component 
    constructor(props) 
        super(props);

        this.state = 
            signedIn: false,
            checkedSignIn: false
        ;
    

    componentWillMount() 
        isSignedIn()
            .then(res => this.setState( signedIn: res, checkedSignIn: true ))
            .catch(err => alert(err));
    

    render() 
        const  checkedSignIn, signedIn  = this.state;

        if (!checkedSignIn) 
            return null;
        

        if (signedIn) 
            console.log("yeah boi");
            console.log(SignedOut);
            return (
                <Provider store=store>
                    <SignedIn screenProps= name: "TestName"  />
                </Provider>
            );
         else 
            console.log("nah bro");
            return (
                <Provider store=store>
                    <SignedOut />
                </Provider>
            );
        
    

屏幕

export default ( navigation, screenProps ) =>
    <View style= paddingVertical: 20 >
        <Card title=screenProps.name>
            <View
                style=
                    backgroundColor: "#bcbec1",
                    alignItems: "center",
                    justifyContent: "center",
                    width: 80,
                    height: 80,
                    borderRadius: 40,
                    alignSelf: "center",
                    marginBottom: 20
                
            >
                <Text style= color: "white", fontSize: 28 >JD</Text>
            </View>
            <Button
                title="SIGN OUT"
                onPress=() =>
                    onSignOut().then(() => navigation.navigate("SignedOut")) // NEW LOGIC
            />
        </Card>
    </View>;

导航

export const SignedIn = TabNavigator(
    Tasks: 
        screen: Tasks,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name="list" size=30 />
        
    ,
    Home: 
        screen: Home,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name="home" size=30 />
        
    ,
    Message: 
        screen: Message,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name="envelope-letter" size=30 />
        
    ,
    Profile: 
        screen: Profile,
        navigationOptions: 
            tabBarIcon: ( tintColor ) =>
                <SimpleLineIcons name="user" size=30 />
        
    
);

【参考方案3】：

使用存储状态获取数据，在***组件中设置存储状态， 在屏幕组件中使用该状态

【讨论】：

感谢 Ashrith，但如果可能的话，我会尝试使用 props 进行无状态操作。