Question

我是React Native的新手。我想添加条件，如下面的代码在initialRouteName中。当“ notification”变量为null时，移至“ MemberProfile”页面。但是如果“ notification”变量不为null，则移至“ ReviewMember”页面。我尝试使用它的代码，但仍转到“ MemberProfile”页面。任何解决方案？这是我的代码

    var notification = null;
class DrawerMember extends Component {
  constructor(props) {
    super(props);
    this.state = {
      notifData: null
    };

    this.callCheck();
  }

  async callCheck() {
    await AsyncStorage.getItem("@tryCode:notification", (err, result) => {
      if (result != null) {
        this.setState({
          notifData: "testing data"
        });
      }
    });
  }

  render() {
    notification = this.state.notifData;
    return <Root />;
  }
}
const Root = createDrawerNavigator(
  {
    MemberProfile: {
      screen: MemberProfileScreen
    },
    ReviewMember: {
      screen: ReviewScreen
    }
  },
  {
    drawerPosition: "right",
    initialRouteName: notification == null ? "MemberProfile" : "ReviewMember",
    contentComponent: props => <SideBar {...props} />,
  }
);

export default DrawerMember;

Answer 1

我认为Root是在异步函数返回之前创建的，因此notification始终为空。

解决此问题的一种可能方法是使用SwitchNavigator作为抽屉中的第一个屏幕。该导航器将负责加载通知并重定向到右侧屏幕。

类似的东西：

import React from 'react';
import { View, AsyncStorage, ActivityIndicator, StatusBar } from 'react-native';


export default class DummySwitch extends React.Component {
  async componentDidMount() {
    this.listener = this.props.navigation.addListener('willFocus', async () => {
      const notification = await AsyncStorage.getItem('@tryCode:notification');
      if (notification === null) {
        this.props.navigation.navigate('MemberProfile');
      }
      else {
        this.props.navigation.navigate('ReviewMember');
      }
    });
  }

  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle='default' />
      </View>
    );
  }
}

如您所见，切换屏幕仅显示一个加载按钮，同时访问异步存储并确定采取的路线。

然后，您像往常一样定义抽屉，但是将开关屏幕添加为初始路径。如果需要，还可以通过定义自己的drawerLabel隐藏标签：

export default createDrawerNavigator({
  Switch: {
    screen: Switch,
    navigationOptions: () => ({
      drawerLabel: () => null,
    }),
  },
  MemberProfile: {
    screen: MemberProfileScreen,
  },
  ReviewMember: {
    screen: ReviewScreen,
  },
}, { initialRouteName: 'Switch' });

就这样，抽屉现在根据您的异步存储选择路由。

如何在“ initialRouteName”抽屉中添加条件，React Native

1 个答案: