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

【问题标题】：React Navigation how to pass props to TabNavigator Stateless Functional ComponentsReact Navigation 如何将 props 传递给 TabNavigator 无状态功能组件
【发布时间】：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？

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

谢谢山姆

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案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 进行无状态操作。