如何在不同JS文件中打印变量？React Native跨文件变量访问求助

你当前的写法无法生效，是因为information是TTrail组件内部的局部变量，外部组件无法直接访问。以下是几种可行的解决方法：

方法1：将数组作为独立模块成员导出 #

这是最简单的方案，适合数组是静态数据的场景：

修改screen1.js，把数组定义在组件外部并导出：

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, ScrollView, Dimensions, RefreshControl, Text, SafeAreaView, Fragment } from 'react-native';

// 将数组导出为模块的公共成员
export const information = [1001,1002,1003,1004,1005];

const TTrail = () =>{
  // 组件内部仍可正常使用information
}

export default TTrail;

然后在screen2.js中导入这个变量并打印：

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, ScrollView, Dimensions, RefreshControl, Text, SafeAreaView, Fragment } from 'react-native';
import TTrail, { information } from './screen1';

const Trail = () =>{
  console.log(information); // 现在能正常打印数组
}

export default Trail;

方法2：通过组件props传递（适合动态数据场景） #

如果information是组件内部的动态状态（比如用useState生成），可以通过回调props将数据传递给父组件：

修改screen1.js，添加回调props：

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, ScrollView, Dimensions, RefreshControl, Text, SafeAreaView, Fragment } from 'react-native';

const TTrail = ({ onReceiveInfo }) =>{
  const [information] = useState([1001,1002,1003,1004,1005]);
  
  useEffect(() => {
    // 组件挂载后将数据传递给外部
    onReceiveInfo(information);
  }, []);
}

export default TTrail;

在screen2.js中通过回调获取数据：

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, ScrollView, Dimensions, RefreshControl, Text, SafeAreaView, Fragment } from 'react-native';
import TTrail from './screen1';

const Trail = () =>{
  const [info, setInfo] = useState([]);

  useEffect(() => {
    console.log(info); // 打印获取到的数组
  }, [info]);

  return (
    <TTrail onReceiveInfo={setInfo} />
  );
}

export default Trail;

方法3：使用状态管理工具（适合多组件共享数据场景） #

如果你的应用有多个组件需要共享这个数据，可以用React Context API或者Redux这类状态管理方案，这里以Context为例：

1. 创建InfoContext.js文件：

import React, { createContext, useContext } from 'react';

const InfoContext = createContext();

export const InfoProvider = ({ children }) => {
  const information = [1001,1002,1003,1004,1005];
  return (
    <InfoContext.Provider value={information}>
      {children}
    </InfoContext.Provider>
  );
};

export const useInfo = () => useContext(InfoContext);

2. 在根组件（如App.js）中包裹InfoProvider：

import { InfoProvider } from './InfoContext';
import Trail from './screen2';

export default function App() {
  return (
    <InfoProvider>
      <Trail />
    </InfoProvider>
  );
}

3. 在screen1.js和screen2.js中使用这个Context：
   screen1.js：

import React from 'react';
import { useInfo } from './InfoContext';

const TTrail = () =>{
  const information = useInfo();
  // 组件内部使用数组
}

export default TTrail;

screen2.js：

import React, { useEffect } from 'react';
import { useInfo } from './InfoContext';

const Trail = () =>{
  const information = useInfo();
  
  useEffect(() => {
    console.log(information); // 打印数组
  }, []);
}

export default Trail;

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