如何在 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 条件,并相应地将文本组件呈现为标签。
尽管我设法达到了我的要求,但我想知道这是否会影响应用程序的性能?
(如果是这样,我应该以某种方式优化它吗?......也许是异步的)
我在 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 条件,并相应地将文本组件呈现为标签。
尽管我设法达到了我的要求,但我想知道这是否会影响应用程序的性能? (如果是这样,我应该以某种方式优化它吗?......也许是异步的)