Question

当我从抽屉本身之外导航到抽屉/菜单列表中的项目时，我试图将其更改为焦点。在这种情况下，我在主屏幕上使用“快速搜索”，它将参数发送到项目列表屏幕，并允许用户执行快速搜索，而不必先导航到它然后在内部进行搜索。

我遇到的问题是，在使用快速搜索时，我似乎无法弄清楚如何更改焦点/让抽屉知道我已经调换了屏幕。

我的抽屉：

const DrawerNav = createDrawerNavigator({
  Screen: {
      screen: Routes,
    }
  }, {
    contentComponent: Menu,
    drawerBackgroundColor: "white",
    drawerWidth: width * 0.8,
    contentOptions: {
      activeTintColor: "white",
      inactiveTintColor: "#000",
      activeBackgroundColor: "transparent",
      itemStyle: {
        width: width * 0.75,
        backgroundColor: "transparent"
      },
      labelStyle: {
        fontSize: 18,
        marginLeft: 12,
        fontWeight: "normal"
      },
      itemsContainerStyle: {
        paddingVertical: 16,
        paddingHorizonal: 12,
        justifyContent: "center",
        alignContent: "center",
        alignItems: "center",
        overflow: "hidden"
      }
    }
});

我的路线只创建了一个包含所有屏幕的堆栈导航器。

使用quicksearch导航到ViewItems：

this.props.navigation.navigate('ViewItems', { searchInput: searchCloned });

最后是我的Menu.js本身：

class Menu extends Component {
  constructor (props) {
    super(props);

    this.state = {
      routes: [
        { label: 'Home', url: 'Home', id: '1', focused: true },
        { label: 'Items', url: 'ViewItems', id: '2', focused: false },
        { label: 'Sign Out', url: 'LogOut', id: '3', focused: false, footer: true },
      ]
    }
  }

  navigateToScreen = (route) => () => {
    const { routes } = this.state;
    var clonedRoutes = cloneDeep(routes);

    for (var i = 0; i < routes.length; i++) {
      if(route != 'LogOut' ){
        clonedRoutes[i].focused = false
      }
    }

    for (var i = 0; i < routes.length; i++) {
      if(routes[i].url == route){
        if(route != 'LogOut'){
          clonedRoutes[i].focused = true;
          this.setState({
            routes: clonedRoutes,
          })
        }
      }
    }

    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  renderItem(item) {
    if(item.footer){
      return null
    }

    return(
      <DrawerItem screen={item.url} title={item.label} focused={item.focused}/>
    )
  }

  renderFooter(item) {
    if(item.footer){
      return(
        <DrawerItem screen={item.url} title={item.label} focused={item.focused}/>
      )
    }

    return(
      null
    )
  }

  render () {
    const { routes } = this.state;

    return(
      <Block style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
        <Block flex={0.05} style={styles.header}>
          <Image source={Images.Logo} />
        </Block>
        <Block flex>
          <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flex: 1,  flexDirection: 'column', justifyContent: 'space-between' }}>
            <FlatList
              data={routes}
              keyExtractor={(item, index) => item.id }
              renderItem={({ item, index }) => (
                <TouchableOpacity onPress={this.navigateToScreen(item.url)} activeOpacity={0.6}>
                  {this.renderItem(item)}
                </TouchableOpacity>
              )}
            />
            <FlatList
              data={routes}
              keyExtractor={(item, index) => item.id }
              renderItem={({ item, index }) => (
                <TouchableOpacity onPress={this.navigateToScreen(item.url)} activeOpacity={0.6}>
                  {this.renderFooter(item)}
                </TouchableOpacity>
              )}
            />
          </ScrollView>
        </Block>
      </Block>
    )
  }
}

如果通过侧面菜单本身完成导航，则可以在列表中更改DrawerItem。

在不使用抽屉的情况下导航时如何修改焦点？

我尝试过将this.props.navigation发送到并跟踪页面的过渡，但是如果在侧边菜单之外完成更改，它也不会继续进行。

我尝试将Menu作为屏幕本身添加到stackNavigator中，然后导航至菜单，并在有参数的情况下选择参数，然后重定向至正确的屏幕+改变抽屉的焦点，但是似乎会打开它修改的窗口本身的副本，而不是打开主菜单本身。

任何朝正确方向的推动都值得赞赏。

我如何在不打开抽屉本身的情况下修改/访问本机DrawerNavigator？

0 个答案: