React Native中如何将App.tsx的变量传递给组件？

先纠正关键错误，再一步步实现参数传递：

1. 修复App.tsx中的问题 #

• 移除无效的new Map(producteurs);代码，组件必须通过JSX渲染而非手动实例化
• 给useEffect添加空依赖数组，避免无限执行
• 修正producteurs的初始状态类型（从空字符串改为数组，匹配后续数据格式）

修改后的App.tsx：

const App = () => {
  
  // 初始值改为数组，匹配search接口返回的数据类型
  const [producteurs, setSearchProducteurs] = useState<any[]>([]);

  // 添加空依赖数组，仅初始化时执行一次
  useEffect(() => {
    sqlService.initDB();
    sqlService.insertInDB();
    sqlService.search().then((data: any)=>{
      setSearchProducteurs(data)
    }).catch((error) => console.log(error));
  }, []);

  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        {/* 将producteurs作为props传递给Navigation组件 */}
        <Navigation colorScheme={colorScheme} producteurs={producteurs} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

export default App;

2. 在Navigation组件中传递参数到TabOneScreen #

假设你的Navigation是基于React Navigation的底部/栈导航，需要把producteurs通过initialParams传递给TabOneScreen：

const Navigation = ({ colorScheme, producteurs }) => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen 
          name="TabOne" 
          component={TabOneScreen}
          // 传递参数给TabOneScreen
          initialParams={{ producteurs: producteurs }} 
        />
        {/* 其他屏幕 */}
      </Tab.Navigator>
    </NavigationContainer>
  );
};

3. 在TabOneScreen中接收参数并传递给Map组件 #

在TabOneScreen中通过route.params获取参数，再传递给Map组件：

const TabOneScreen = ({ route }) => {
  // 从路由参数中取出producteurs
  const { producteurs } = route.params;

  return (
    <View style={{ flex: 1 }}>
      {/* 将producteurs作为props传递给Map组件 */}
      <Map producteurs={producteurs} />
    </View>
  );
};

4. 修改Map组件接收并同步props到状态 #

因为Map是类组件，需要在构造函数初始化状态，并在props更新时同步状态：

class Map extends Component<any, any> {
  
  private _map: any;

  constructor(props: any){
    super(props);

    // 用传入的producteurs初始化company_name状态
    this.state = {
      company_name: props.producteurs || []
    }
  }

  // 当props更新时，同步更新状态
  componentDidUpdate(prevProps: any) {
    if (prevProps.producteurs !== this.props.producteurs) {
      this.setState({ company_name: this.props.producteurs });
    }
  }

  // 组件挂载时如果有参数，也同步一次
  componentDidMount() {
    if (this.props.producteurs) {
      this.setState({ company_name: this.props.producteurs });
    }
  }

  // 其他组件逻辑...
}

可行性说明 #

这种方式完全可行，核心是通过props逐层传递（App → Navigation → TabOneScreen → Map），并在类组件中通过生命周期方法同步props到内部状态。如果你的项目使用React Navigation v6+，也可以用useRoute钩子更简洁地获取参数，逻辑是一致的。

内容的提问来源于stack exchange，提问作者Tweakdev