Question

This.props.navigation 超出组件范围

2021-02-11

124

reactjs react-native stack-navigator

我想在我的钩子上添加 this.props.navigate。这个不在我的类组件中，所以我有这个错误

TypeError：undefined 不是对象（评估“_this.props.navigation”）

我如何在顶部传递构造函数 props？

还有我的钩子

function LoginApp() {
    // Set an initializing state whilst Firebase connects
    const [initializing, setInitializing] = useState(true);
    const [user, setUser] = useState();
  
    // Handle user state changes
    function onAuthStateChanged(user) {
      setUser(user);
      if (initializing) setInitializing(false);
    }
    
    useEffect(() => {
      
      
      const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
      return subscriber; // unsubscribe on unmount
    }, []);
  
    if (initializing) return null;
  
    if (!user) {
      return (
        <View>
          <Text style={{textAlign:'center', color:'white', fontSize:48}}>Connexion</Text>
          
         
          
        </View>
      );
    }

  
    
    return (
      
      <View>
        <Button onPress={()=> this.props.navigation.navigate('subscribe')}>Créer ma team</Button>
      </View>
    );
  }

Answer 1

这 只在课堂上有效，不能在 Hooks 中工作，所以你可以按照以下方式操作

function LoginApp({ navigation }) {
    return (
      <View>
        <Button onPress={()=> navigation.navigate('subscribe')}>Créer ma team</Button>
      </View>
    );
  }

Answer 2

You can also navigate in hook by installing package
npm i @react-navigation/native 
then import it in your file as 
        import { useNavigation } from "@react-navigation/native";
        const LoginApp = ()=>{
        const navigation = useNavigation();
        return (
           <View>
             <Text onPress={() => navigation.navigate("Login")}>Login</Text>
           </View>
           );
          }