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直接传递到导航器中，但是我无法弄清楚组件如何访问这些数据。

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

感谢您的帮助！

解决方案

我没有意识到可以通过导航器中的屏幕键返回功能来访问道具。

以下是对我有用的最终解决方案：

accounts.forEach(account => {
    accountScreens[account.accountNumber] = {screen: (props) => {
        return <AccountScreen accountNumber={account.accountNumber} {...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，该API可以实现：https://blog.expo.io/announcing-react-navigation-5-0-bd9e5d45569e

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

2 个答案: