反应原生。 如何在没有 onPress() 的情况下导航到下一个屏幕

Question

所以我正在开发一个跌倒检测器应用程序，我想要的只是当功能 Notify() 激活时，它将导航到下一个屏幕，它将开始计时器倒计时，而不需要 onPress 导航。 任何人都知道该怎么做？

问题是我只知道如何通过 onPress 导航，但是当函数执行时如何导航到下一个屏幕？

import React, { Alert, useState, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import NotificationPopup from 'react-native-push-notification-popup';
import { Gyroscope } from 'expo-sensors';
import "react-native-gesture-handler";
import { CountdownCircleTimer } from 'react-native-countdown-circle-timer';
import { NavigationContainer } from "@react-navigation/native";
import AlertUser from '../Screens/alert';


 function SensorResult() {
  const [data, setData] = useState({
    x: 0,
    y: 0,
    z: 0,
  });
  const [subscription, setSubscription] = useState(null);

  const _slow = () => {
    Gyroscope.setUpdateInterval(1000);
  };

  const _fast = () => {
    Gyroscope.setUpdateInterval(16);
  };

  const _subscribe = () => {
    setSubscription(
      Gyroscope.addListener(gyroscopeData => {setData(gyroscopeData);})
    );
  };

  const _unsubscribe = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  useEffect(() => {
    _subscribe();
    return () => _unsubscribe();
  }, []);

  const { x, y, z } = data;


  const Notify = () => {
    if(x > 1 || y > 1 || z > 1){
      var fall = "You have fallen";
      console.log(fall);
      // navigation.navigate("AlertUser");
      this.popup.show({
        title: 'Alert',
        message: 'You have fallen',
        button: {
          text: 'OK',
          color: '#008000',
          flex: 1,
          textAlign: 'center',
          onPress: () => console.log('OK Pressed'),
        },
        duration: 50000,
        onClose: () => {
          console.log('closed');
        },
      });
    }
  }

  
  console.log(Notify());
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        x: {Math.round(x)} y: {Math.round(y)} z: {Math.round(z)}
      </Text>
      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={subscription ? _unsubscribe : _subscribe} style={styles.button}>
          <Text>{subscription ? 'On' : 'Off'}</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_slow} style={[styles.button, styles.middleButton]}>
          <Text>Slow</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_fast} style={styles.button}>
          <Text>Fast</Text>
        </TouchableOpacity>
        
        <NotificationPopup ref={ref => this.popup = ref} styles={{
          flex:1, 
           width: 50,
           }}>
        </NotificationPopup>
        
       
        

      </View>
      

      
    </View>
  );
  
}


export default SensorResult;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  text: {
    textAlign: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 15,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eee',
    padding: 10,
  },
  middleButton: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: '#ccc',
  },
  Alert: {
    flex: 1,
  },
  
  


  });

Answer 1

首先，您为什么不对组件使用箭头功能？

我是说：

const SensorResult = ( ) => { // your component's code }

回答您的问题，您可以通过两种方式实现它，首先是使用组件内的导航挂钩，如下所示：

const { navigate } = useNavigation();
navigate("your_screen_name", {/*if you want to pass data to the screen */})

访问导航属性的第二种方法是通过这样的道具：

const SensorResult = ( props ) => { 
    props.navigation.navigate("your screen name", {/*if you want to pass data to the screen */})
    // your component's code 
}

我看到当调用 notify 并且满足某些条件时您有一个弹出窗口，因此您有 2 个选项，当用户在弹出 onpress 功能中按 ok 时将您的导航属性调用到下一个屏幕，或者只是导航到下一页而没有只需像这样调用您的导航属性即可弹出：

const Notify = () => {
    if(x > 1 || y > 1 || z > 1){
      var fall = "You have fallen";
      console.log(fall);
      
      //first approach
      this.popup.show({
        title: 'Alert',
        message: 'You have fallen',
        button: {
          text: 'OK',
          color: '#008000',
          flex: 1,
          textAlign: 'center',
          onPress: () => navigation.navigate("AlertUser"),
        },
        duration: 50000,
        onClose: () => {
            //also navigate when popup is closed
          navigation.navigate("AlertUser")
        },
      });
      
      //or second approach
      navigation.navigate("AlertUser")
    }
  }

或第二种方法

const Notify = () => {
    if(x > 1 || y > 1 || z > 1){
      var fall = "You have fallen";
      console.log(fall);
      
      //or second approach
      navigation.navigate("AlertUser")
    }
  }