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

Question

我正在学习使用React Navigation并热爱它，但无法弄清楚如何将道具从顶级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？

我是新来的人，所以请保持柔和:)

谢谢山姆

Answer 1

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

Answer 2

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

Answer 3

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