如何在抽屉打开/关闭事件上更新抽屉标签文本(通过导航选项)

Question

>我在导航选项中定义了抽屉标签，如下所示：

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'
            }            
    },
};

当抽屉中的任何抽屉物品被按下时，这将完美地更新标签。

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

但我希望这个抽屉标签在抽屉上更新。Open（） 调用也是如此。或者当在任何屏幕上按下左标题时（触发抽屉。打开（） ）

那么，如何在抽屉打开/关闭上实现此行为？我能够在按下任何抽屉项目上实现这一点

Answer 1

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

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。在这种情况下，您需要在根导航器中定义这些 props。之后，如果您将它们与导航一起传递，您将能够在navigationOptions中访问它们：

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

Answer 2

我设法实现了以下所需的输出（我担心从长远来看可能会导致性能问题）：

我创建了一个自定义组件，并使用以下命令强制它每秒重新渲染一次：

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

并在导航选项的抽屉标签中使用该组件：

drawerLabel: ()=> {        
    return <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 条件每秒检查一次，文本组件相应地呈现为标签。

即使我设法实现了我所要求的，我也想知道这是否会影响应用程序的性能？（如果是这样，我应该以某种方式优化它吗？异步也许）