React Navigation 如何将道具传递给 TabNavigator 无状态功能组件 [英] React Navigation how to pass props to TabNavigator Stateless Functional Components

问题描述

我正在学习使用 React Navigation 并喜欢它，但不知道如何将 props 从我的顶级应用组件发送到我的屏幕组件.我可能(很可能)完全以错误的方式去做这件事.这是我的代码.

I am learning to use React Navigation and loving it, but can't figure out how to send props from my top level App Component down to my screen components. I could be (most probably) going about it completely the wrong way. Here is my code.

主要应用组件

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?

Can anyone tell me how I would pass props, such as my attempted {(name = "TestName")}, to the SignedIn SFC?

我是新手，所以请保持温和:)

I am fairly new to react so please be gentle :)

谢谢山姆

推荐答案

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

Got it sorted while still keeping the items stateless, using React Navigations screenProps parameter. Just had to fix my syntax in the Nav component and explicitly call screenProps in my screen. Here it is for reference:

主应用

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} />
        }
    }
});

这篇关于React Navigation 如何将道具传递给 TabNavigator 无状态功能组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！