react-native，將參數傳遞給DrawerNavigator

Question

其實我有這個抽屜導航器

const MyDrawerNavigator = DrawerNavigator(
  {...
    CreditsPage: { screen: CreditsPage },       
    TermsOfUsePage: { screen: TermsOfUsePage },
    LegalNoticePage: { screen: LegalNoticePage },        
  },
  {...}
);

CreditsPage ， TermsOfUsePage ， LegalNoticePage組件僅顯示一個webView，因此僅更改源URL。 StaticWebView是我創建的用於分解webView代碼的組件，但是我必須復制多個文件內的以下代碼，這並不干凈。 我只更改每個文件中的配置

const config = {
  title: "Credits",
  icon: "copyright",
  url: "https://mysite.fr/credits"
}
import React from "react";
import { View } from "react-native";
import IconFeather from "react-native-vector-icons/Feather";
import Icon from "react-native-vector-icons/FontAwesome";
import StaticWebView from "project/src/page/StaticWebView.js"
import I18n from 'project/src/i18n/i18n';

export default class test extends React.PureComponent {
  static navigationOptions = ({ navigation }) => {
    return {
      title: I18n.t(config.title),
      headerLeft: <View style={{ padding: 10, alignItems: "center" }}>
        <IconFeather name="arrow-left" size={25} color='black'
          onPress={() => { navigation.goBack(); navigation.navigate("DrawerToggle"); }} />
      </View>,
      drawerLabel: I18n.t(config.title),
      drawerIcon: ({ tintColor }) => <Icon name={config.icon} size={20} color={tintColor} />
    };
  };
  render() {
    return (
      <StaticWebView url={config.url} />
    )
  }
}

我找不到任何如何將參數傳遞給抽屜導航器。 例如這樣：

const MyDrawerNavigator = DrawerNavigator(
  {...
    CreditsPage: { screen: staticWebView , config:{ url :"...."} },       
    TermsOfUsePage: { screen: staticWebView , config:{ url :"...."} }, 
    LegalNoticePage: { screen: staticWebView , config:{ url :"...."} },      
  },
  {...}
);

有小費嗎 ？

Answer 1

您可以使用以下props將參數傳遞給Drawernavigator

const MyDrawerNavigator = DrawerNavigator(
  {...
    CreditsPage: { screen: props => <StaticWebView {...props} url="...." /> },
    TermsOfUsePage: { screen: props => <StaticWebView {...props} url="...." /> },
    LegalNoticePage: { screen: props => <StaticWebView {...props} url="...." /> },      
  },
  {...}
);

您可以按以下方式在StaticWebView組件中訪問道具

const URL = this.props.url;