Question

我有这个路由器配置：

export const Bird = StackNavigator({
    ResidentBirds: {
        screen: BirdList,
        navigationOptions: ({navigation}) => ({
            title: 'Resident Birds',
        })
    },
    MigratoryBirds: {
        screen: BirdList,
        navigationOptions: {
            title: 'Migratory Birds'
        }
    }
});

两条路线都有相同的屏幕组件（ BirdList ）。

BirdList.js：

export default class BirdList extends React.Component {
    state = {
        fetching: false,
        dataSource: []
    };

    componentDidMount() {
        this.getBirds();
    }

    getBirds = () => {
        // const birdType = this.props.navigation.state.params.birdType;
        // const args = this.pros.navigation.state.params.args;

        // fetch list of birds of type birdType
    };

    render() {
        return (
            <View style={{flex: 1, backgroundColor: 'skyblue'}}>
                <Text>Fetching birds: {this.state.fetching.toString()}</Text>
                <FlatList
                    data={this.state.dataSource}
                    ...
                />
            </View>
        )
    }
}

App.js：

import {Bird} from './src/config/router'
export default class App extends React.Component {
    ...

    render() {
        return <Bird/>
    }
}

我的问题是如何将默认参数传递给路由（即ResidentBirds和MigratoryBirds），以便我可以使用该值来获取适当的数据？

也许是这样的：

export const Bird = StackNavigator({
    ResidentBirds: {
        screen: BirdList,
        navigationOptions: ({navigation}) => ({
            title: 'Resident Birds',
        }),
        params: {
            birdType: 'Resident',
            args: {
                'height': 100,
                'region': 'America'
            }
        }
    },
    MigratoryBirds: { 
        ...
    }
});

Answer 1

Spencer的工作解决方案in github：

export const Bird = StackNavigator({
    ResidentBirds: {
        screen: (props) => <BirdList {...props} birdType="Resident" args={{ height: 100, region: 'America' }} />,
        navigationOptions: ({navigation}) => ({
            title: 'Resident Birds',
        })
    },
    ...
});

如何将默认参数传递给反应导航中的每个路径

1 个答案: