javascript - 在 React native 中向下传递参数的问题

Question

我很难使用 React StackNavigator，并将参数向下传递到屏幕。我只是在学习 React Native 如何工作的阶段，所以也许这不是最佳实践，所以如果有更好的方法，我愿意接受其他建议。

function SetupsStack(props) {
    console.log(props.route.params.Setup,"route is") // This has what I want
    return (
        <Stack.Navigator
            initialRouteName="IndivdualSetup"
            mode="card"
            headerMode="screen"
        >
            <Stack.Screen
                name="IndivdualSetup"
                component={IndivualScreen}
                //component={<IndividualScreen individual={props.route.params.Setup} />} thought this was it but its not
                options={{
                    header: ({ navigation, scene }) => (
                        <Header
                            title="IndivdualSetup"
                            tabs
                            tabTitleSizeRight={10}
                            tabRightIcon={"shape-star"}
                            scene={scene}
                            navigation={navigation}
                        />
                    ),
                }}
            />
        </Stack.Navigator>
    );
}

组件：

import React from "react";
import { ScrollView, StyleSheet, Dimensions } from "react-native";
import { Block, Text, theme } from "galio-framework";

const { width } = Dimensions.get("screen");

const thumbMeasure = (width - 48 - 32) / 3;

export default class IndivualScreen extends React.Component {
    render() {
        // const {
        //     navigation,
        //     route,
        // } = this.props;
        // const { product } = route.params;
        console.log(this.props,"props are")


        return (
            <Block flex center>
                <ScrollView
                    style={styles.components}
                    showsVerticalScrollIndicator={false}
                >
                    <Block flex>
                        <Text bold size={30} style={styles.title}>
                            Text here
                        </Text>
                    </Block>
                </ScrollView>
            </Block>
        );
    }
}

此组件中的控制台日志没有路由作为参数只是导航，但这只有 setParams （看起来像 v5 和更新版本中删除的 getParams。但是如果我这样做：

component={<IndividualScreen individual={props.route.params.Setup} />} 

我得到：

Blockquote 错误：屏幕“IndivdualSetup”的“组件”道具的值无效。它必须是有效的 React 组件。

我的语法在任何地方看起来都是正确的，所以不确定我的问题是什么，或者如果它不起作用，因为我应该遵循更好的做法。

提前致谢！

标签： javascriptreactjsreact-nativejsx

Answer 1

代替

component={<IndividualScreen individual={props.route.params.Setup} />} 

你必须这样做：

component={(props)=> <IndividualScreen individual={props.route.params.Setup} />}