Question

我认为onPress仅在触摸事件触发时才起作用。以前就是这种情况，但是当我在非StackNavigator中的屏幕中使用了Navigation时，onPress似乎会自动呈现。

HomeScreen.js

function mapStateToProps(state) {
  return { action: state.action };
}

function mapDispatchToProps(dispatch) {
  return {
    openMenu: () =>
      dispatch({
        type: "OPEN_MENU",
      }),
  };
}

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.notificationVisibility = this.notificationVisibility.bind(this);
    this.dashboardVisibility = this.dashboardVisibility.bind(this);
    this.state = {
      scale: new Animated.Value(1),
      opacity: new Animated.Value(1),
      user: "",
      notificationvisibility: true,
      dashboardvisibility: false,
    };
  }

  static navigationOptions = {
    headerShown: false,
  };

  componentDidUpdate() {
    this.toggleMenu();
  }

  async componentDidMount() {
    StatusBar.setBarStyle("dark-content", true);
    let user = await Auth.currentAuthenticatedUser();
    this.setState({ user: user.username });
    console.log("logged in!");
  }

  toggleMenu = () => {
    if (this.props.action == "openMenu") {
      Animated.timing(this.state.scale, {
        toValue: 0.9,
        duration: 300,
        easing: Easing.in(),
      }).start();
      Animated.spring(this.state.scale, {
        toValue: 0.5,
      }).start();

      StatusBar.setBarStyle("light-content", true);
    }

    if (this.props.action == "closeMenu") {
      Animated.timing(this.state.scale, {
        toValue: 1,
        duration: 300,
        easing: Easing.in(),
      }).start();
      Animated.spring(this.state.scale, {
        toValue: 1,
      }).start();

      StatusBar.setBarStyle("dark-content", true);
    }
  };

  notificationVisibility = () => {
    console.log("pressed!");
    this.setState({
      notificationvisibility: true,
      dashboardvisibility: false,
    });
  };

  dashboardVisibility = () => {
    console.log("pressed!");
    this.setState({
      notificationvisibility: false,
      dashboardvisibility: true,
    });
  };

  render() {
    return (
      <RootView>
        <Menu />
        <AnimatedContainer
          style={{
            transform: [{ scale: this.state.scale }],
            opacity: this.state.opacity,
          }}
        >
          <SafeAreaView>
            <ScrollView style={{ height: "100%" }}>
              <HeaderBox>
                <TitleBar>
                  <Title>Welcome back,</Title>
                  <Name>{this.state.user}</Name>
                  <TouchableOpacity
                    onPress={this.props.openMenu}
                    style={{ position: "absolute", right: 30 }}
                  >
                    <Avatar source={require("../../assets/profilepic.jpg")} />
                  </TouchableOpacity>
                </TitleBar>

                <Searchbar>
                  <Ionicons
                    name="ios-search"
                    size={20}
                    color="#00263A"
                    style={{ padding: 10 }}
                  />
                  <TextInput />
                </Searchbar>
              </HeaderBox>

              <MenuNav>
                <TouchableOpacity onPress={this.notificationVisibility}>
                  <Navigation>Notifications</Navigation>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.dashboardVisibility}>
                  <Navigation>Dashboard</Navigation>
                </TouchableOpacity>
              </MenuNav>

              <ScrollView
                style={{
                  flexDirection: "row",
                  padding: 20,
                  paddingLeft: 12,
                  paddingTop: 65,
                  paddingBottom: 35,
                }}
                horizontal={true}
                showsHorizontalScrollIndicator={false}
              >
                {logos.map((logo, index) => (
                  <Notification
                    key={index}
                    image={logo.image}
                    text={logo.text}
                    text2={logo.text2}
                  />
                ))}
              </ScrollView>

              {this.state.dashboardvisibility ? <DashboardHome /> : null}
              {this.state.notificationvisibility ? <NotificationHome /> : null}
            </ScrollView>
          </SafeAreaView>
        </AnimatedContainer>
      </RootView>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

MenuScreen.js

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.signOut = this.signOut.bind(this);
  }

  state = {
    top: new Animated.Value(screenHeight),
  };

  async signOut() {
    // const { navigation } = this.props;
    await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
    Auth.signOut();
    this.props.navigation.navigate("AuthLoading");
  }

  componentDidMount() {
    this.toggleMenu();
  }

  componentDidUpdate() {
    this.toggleMenu();
  }

  toggleMenu = () => {
    if (this.props.action == "openMenu") {
      Animated.spring(this.state.top, {
        toValue: 54,
      }).start();
    }

    if (this.props.action == "closeMenu") {
      Animated.spring(this.state.top, {
        toValue: screenHeight,
      }).start();
    }
  };

  render() {
    return (
      <AnimatedContainer style={{ top: this.state.top }}>
        <Cover>
          <Image source={require("../../assets/backgroundimg.png")} />
          <Title>Vanessa Wong</Title>
          <Subtitle>filler</Subtitle>
        </Cover>
        <TouchableOpacity
          onPress={this.props.closeMenu}
          style={{
            position: "absolute",
            top: 120,
            left: "50%",
            marginLeft: -22,
            zIndex: 1,
          }}
        >
          <CloseView>
            <Ionicons name="ios-close" size={44} color="#000000" />
          </CloseView>
        </TouchableOpacity>
        <Content>
          <MenuItem icon="ios-settings" title="Account" text="settings" />
          <MenuItem icon="ios-card" title="Billing" text="payments" />
          <NavigationContainer ref={navigationRef}>
            <TouchableOpacity onPress={() => this.signOut()}>
              <MenuItem icon="ios-exit" title="Logout" text="see you soon!" />
            </TouchableOpacity>
          </NavigationContainer>
        </Content>
      </AnimatedContainer>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withNavigation(Menu));

我在HomeScreen.js中调用onPress={this.props.openMenu}的方式有问题吗？我尝试onPress={()=>this.props.openMenu}无济于事。

Answer 1

首先，我想对我们的社区表示欢迎^ _ ^，
我真希望大家在这里找到最好的方式。

关于您的问题尝试将这两个注释掉，并告诉我是否有任何更新。

  componentDidMount() {
       // this.toggleMenu();
      }

  componentDidUpdate() {
   // this.toggleMenu();
  }

万事如意

用Navigation自动调用React Native onPress

1 个答案: