如何在 DrawerOpen/Close 事件上更新 DrawerLabel 文本(通过导航选项)

How to update DrawerLabel text (via navigationOptions) on DrawerOpen/Close event

我在 navigationOptions 中定义了 drawerLabel 如下:

export default class Something extends React.Component {

static navigationOptions = {
    drawerIcon: () => (
      <Image source={drawerImage} style={styles.imageStyle} />
    ),

   drawerLabel: ()=>{

        if(~some condition~){
                return 'New Label'
            }else if(~some other condition~){  
                return 'Another Label'
            }else{
                return 'label'
            }            
    },
};

这会在抽屉中按下任何 drawerItem 时完美地更新标签。

(显然打开任何抽屉项目都会更新所有路线的导航选项)

但我希望此 drawerLabel 也能在 drawer.Open() 调用时更新。 或在任何屏幕上按下 left-header 时(触发 drawer.Open() )

那么,我怎样才能在 DrawerOpen/Close 上实现这种行为呢? 我可以通过按任何 drawerItem

来实现这一点

将导航道具传递给您的导航选项。

static navigationOptions = ({ navigation }) => ({
        drawerLabel: ()=>{ // maybe you also need to pass navigation to this function through the parentheses (navigation)

            if(~some condition~){
                return navigation.state.params.labels.first
            }else if(~some other condition~){  
                return navigation.state.params.labels.second
            }else{
                return navigation.state.params.labels.third
            }            
        },
    });

显然,您需要创建标签:

navigation.setParams({ labels: { first: 'labelOne', second: 'labelTwo', third: 'labelThree' }})   

在您可以访问它们之前。

如果您不明白如何将标签添加到参数中 - 不要犹豫,尽管提问。

如果您有静态标签,也可以使用 screenProps。在这种情况下,您需要在 root-navigator 中定义这些道具。之后,如果您将它们与导航一起传递,您将能够在 navigationOptions 中访问它们:

static navigationOptions = ({ navigation, screenProps }) => ({

我设法实现了如下所需的输出(我担心它可能会导致长时间的性能问题 运行):

我创建了一个自定义组件并强制它每秒重新渲染一次:

componentDidMount() {
this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000);   }

并在 navigationOption 的 drawerLabel 中使用该组件:

drawerLabel: ()=> {        
    return <CustomComponent  />
    } 

现在它不需要在任何 drawerItem 或 drawerToggle 调用中点击事件。 (即使抽屉打开并且根本没有点击,标签也会更新)

以下是 CustomComponent 的渲染代码:

 if(~some condition~){
            return <Text> New Label </Text>
        }else if(~some other condition~){  
            return <Text> Another Label </Text>
        }else{
            return <Text>label</Text>
        }        

现在每秒检查一次 if/else 条件,并相应地将文本组件呈现为标签。

尽管我设法达到了我的要求,但我想知道这是否会影响应用程序的性能? (如果是这样,我应该以某种方式优化它吗?......也许是异步的)