您是否可以在React Navigation Tab Navigator中以编程方式生成屏幕

Question

[使用React-Navigation，我试图根据我从数组中绘制的值生成未知数量的标签，并将该数组值中的数据传递到屏幕中。例如，如果我有2个帐户，则希望有2个选项卡，每个选项卡都有屏幕，但是，如果我有5个帐户，则有5个选项卡，它们具有自己的屏幕，这些屏幕是通过数据库发送来的值以编程方式生成的。

到目前为止，我要做的是：

interface Account {
  accountNumber: string;
  balance: number;
}

const accounts: Account[] = [
  { accountNumber: '1', balance: 10 },
  { accountNumber: '2', balance: 15 },
  { accountNumber: '3', balance: 20 }
];


class AccountScreen extends React.Component<Account>{
  constructor(props: Account) {
    super(props)
  }

  render() {
    return (
      <View>
        <Text>This is an Account</Text>
        <Text>Account Number: {this.props.accountNumber}</Text>
        <Text>Balance: £{(this.props.balance/100).toFixed(2)}</Text>
      </View>
    );
  }
};

const accountScreens = {};

accounts.forEach(account => accountScreens[account.accountNumber] = { screen: AccountScreen, props: account }); 
// SOMETHING LIKE THIS

export default AccountNavigator = createMaterialTopTabNavigator(accountScreens);

屏幕显示的选项卡正确，但是每个帐户中的值都不会通过道具传递。我知道您无法将传递props直接传递到导航器中，但是我无法弄清楚该组件如何访问这些数据。

我是从根本上说这是错误的，还是我缺少一些语法上的东西？

感谢您的帮助！

Answer 1

P.S，我没有检查，但这是您的操作方式！

/*...your code*/

let screens = accounts.map(e=>{screen:(props)=><AccountScreen account={e} {...props}/>})

export default AccountNavigator = createMaterialTopTabNavigator({...screens});

注意：使用此代码后，您的屏幕名称将成为对象的索引。当您想导航时，应使用navigation.navigate('1)

您正在尝试在初始化时生成屏幕，这完全没问题。但我建议您只使用一个屏幕并调整其中的值！

Answer 2

当前稳定的React Navigation版本不支持基于某些数据动态生成屏幕。

React Navigation 5有一个新的动态API，它使得：https://blog.expo.io/announcing-react-navigation-5-0-bd9e5d45569e