我可以在react-navigation中使用变量作为routeName吗？

Question

我和我的伙伴是反应原生的新手。我们尝试应用react-native来构建一个小型应用程序，我们有一个带有FlatList的主页，并通过react-navigation在不同屏幕之间导航。

我们希望 FletList 中的每一行都可以导航到不同的屏幕。所以，我想放置一个变量作为routeName，它可以从FlatList的DATA中获取路由名称。然而，不幸的是，它不起作用。

问题是：我可以使用变量作为routeName吗？如果是这样，我怎样才能实现它。如果没有，还有其他方法可以达到目的吗？

--

这里是FlatList的数据，我们添加“nextpage”，希望它可以作为路由名称来引导导航器。

const DATA = [
    {
      id: 'a1',
      title: 'Task1',
      type: 'c1',
      requester: 'lab',
      createtime:'2019-12-23',
      nextpage: 'instructionScreen',
    },
    {
        id: 'a2',
        title: 'Task2',
        type: 'c1',
        requester: 'lab',
        createtime:'2019-11-16',
        nextpage: 'introSliders',
    },
  ];

当我们在 this.props.navigation.navigate 之后放置 'introSliders' 时，导航器就会工作；但是，如果我输入 {item.nextpage} 则不起作用。

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'List',
    };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={styles.header}>List</Text>
        <FlatList
            data={DATA}
            renderItem={
                ({ item }) => {
                    return (
                      <Item title={item.title} 
                        type={item.type} 
                        requester={item.requester} 
                        createtime={item.createtime}
                        action={() => this.props.navigation.navigate('introSliders')}
                        // action={() => this.props.navigation.navigate({item.nextpage})}             
                      />
                    )
                }
            }
            keyExtractor={item => item.id}
        />
      </View>
    );
  }
}

Answer 1

//action={() => this.props.navigation.navigate('introSliders')}

//action={() => this.props.navigation.navigate({item.nextpage})}

直接尝试使用变量名称删除大括号：

action={() => this.props.navigation.navigate(item.nextpage)}