标签: react-navigation

如何正确键入作为道具传递给另一个组件的导航？根据文档

应用程序中的每个屏幕组件都会自动提供导航道具。

并且，

要对我们的屏幕进行类型检查，我们需要注释屏幕接收到的导航属性和路线属性。

type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>;

我有一个带有路由器的导航组件：

const App: React.FC = () => {
  const [userMetrics, setUserMetrics] = useState<UserMetrics>(null);
  const Stack = createNativeStackNavigator<RootStackParamList>();
  return (
    <UserMetricsContext.Provider value={{ userMetrics, setUserMetrics }}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Tests" component={Tests} />
        </Stack.Navigator>
      </NavigationContainer>
    </UserMetricsContext.Provider>
  );
};

在主屏幕中，我想接收导航道具以将其进一步传递到表单，该表单有一个按钮，该按钮将导航到测试组件并将表单数据作为参数传递：

interface Props {
  navigation: NativeStackScreenProps<RootStackParamList, "Home">;
}

export const Home: React.FC<Props> = ({ navigation }) => {
  const { setUserMetrics } =
    useContext<IUserMetricsContextType>(UserMetricsContext);
  return (
    <View style={styles.container}>
      <StatusBar style="auto" /> …

我正在开发一个带有 bare expo 和 React Native 的项目。我已经在我的项目中实施了 firebase。登录和注册工作正常。我创建了一个身份验证检查，以便在用户登录时将其发送到另一个页面。尽管在尝试将用户发送到另一个页面时收到以下错误：

这是我的 App.tsx：

import React, { useEffect, useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { ThemeProvider } from 'styled-components';
import {
    useFonts,
    Poppins_400Regular,
    Poppins_500Medium,
    Poppins_700Bold
} from '@expo-google-fonts/poppins';
import AppLoading from 'expo-app-loading';
import theme from './src/global/styles/theme';
import { NavigationContainer } from '@react-navigation/native';
import { AppRoutes } from './src/routes/app.routes';
import 'intl';
import 'intl/locale-data/jsonp/pt-BR';
import { SignIn } from './src/screens/SignIn';
import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';

export default function App() …

我BackHandler在应用程序的“主”屏幕上使用来提醒用户确认退出应用程序。我的根导航器上有 2 组屏幕身份验证和主页，并且isLoggedbool 确定显示哪一组。

问题：应用程序的第一次渲染工作正常（无论是身份验证还是主屏幕集），但是当isLogged更改并且屏幕集发生变化时，BackHandler开始在更改集的每个屏幕上触发。这仅在重新启动应用程序后才能修复。工作示例 - https://snack.expo.dev/@msaxena92/11fd51

预期结果：在导航器内按回键应该会将您带到initialRoute导航器的第一个屏幕或第一个屏幕，只有在此之后，当导航堆栈中没有更多屏幕时，它才会退出应用程序。

我正在尝试在我的以下代码中使用嵌套路由Router.js：

return (
<Routes>
  <Route path="" element={<Home />} />
  <Route path="/DriverPage/*"  element={<DriverPage />}>
      <Route path="DriverSignUp" element={<DriverSignUp />}/>
      <Route path="DriverLogin" element={<DriverLogIn />} />
  </Route>
  <Route path="/PassengerPage/*" element={<PassengerPage />} />
</Routes>

DriverPage.js这是父路由组件中的代码：

return (
<>     
  <div className="driver-auth">
    <button onClick={ ()=>navigate("DriverSignUp",{replace:true}) }> Sign up </button>
    <button onClick={ ()=>navigate("DriverLogin",{replace:true}) }> Sign in </button>
  </div>
  <Outlet />
</>

问题是我想在单击按钮时用嵌套组件替换父组件，因为我不希望父组件继续显示。

这就是为什么我尝试使用navigate("DriverLogin",{replace:true})但它没有帮助，并且单击时我会看到父路线和子路线。

我认为这是因为/*我在父路由路径中拥有，这意味着即使只是开始匹配它也匹配。

那么，是否有任何解决方案仍然使用嵌套路由，或者我不应该使用嵌套？

还有一个问题是：为什么替换不起作用？

谢谢！

正如你在下面看到的，我尝试了很多方法将背景颜色设置为透明（需要 UI），但都无济于事。背景像图像一样保持灰色

  <Tab.Navigator screenOptions={{
    tabBarShowLabel: false,
    swipeEnabled: false,
    tabBarShowIcon: true,
    tabBarItemStyle: { width: iconwidth },
    tabBarStyle: { backgroundColor: 'transparent', paddingBottom: 10},
    tabBarContentContainerStyle: {backgroundColor : 'transparent', display: 'flex', justifyContent: 'center', alignItems: 'center'},
    tabBarPressColor: '#3C60AA',
    tabBarIndicatorStyle: {width: iconwidth , height: 5, backgroundColor: '#3C60AA', borderRadius: 20, marginStart: iconwidth *0.61},
    lazy: true,
    lazyPlaceholder: () => <POTab_lazy/>
  }}>

    <Tab.Screen name="POTab_1" component={POTab_1} options={{ tabBarAccessibilityLabel: 'Info',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_info.png')} style={{width: 30, height: 30 }}/>), }}/>
    <Tab.Screen name="POTab_2" component={POTab_2} options={{tabBarAccessibilityLabel: …

我做了一个全屏幕,TextInput并希望Post button在NavigationBar按下时执行动作.但是,因为我必须使Button在onPressprop中调用静态方法的方法,所以我无法访问state.

这是我当前的代码,状态是未定义的console.log.

import React, { Component } from 'react';
import { Button, ScrollView, TextInput, View } from 'react-native';
import styles from './styles';

export default class AddComment extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Add Comment',
      headerRight: (
        <Button
          title='Post'
          onPress={() => AddComment.postComment() }
        />
      ),
    };
  };

  constructor(props) {
    super(props);
    this.state = {
      post: 'Default Text',
    }
  } …

我有一个视图,我试图通过react-native-router-flux模块加载.

但是,它没有在模拟器上显示屏幕.但是,我可以在react-dev工具中看到我的组件.

Android模拟器上没有看到任何错误,只有空屏幕.细节如下:

Test.js:

import React from 'react';
import { Text, View } from 'react-native';

const Test = () => {
    return (
         <View style={{margin: 128}}>
      <Text>This is PageTwo!</Text>
      </View>
    );
};

export default Test;

我的路由器:Router.js

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import LoginForm from './components/LoginForm';
import Test from './components/Test';

class RouterComponent extends Component {
  render() {
    return (
      <Router>
        <Scene key="root" >
          <Scene key="pageOne" component={Test} title="PageOne" initial={true} />
          <Scene key="pageTwo" component={LoginForm} …

嗨,我是新来的反应原生,我面临奇怪的路由问题.我做错了但需要有人来指导我.

index.android.js

import { LandingScreen } from './src/components/landing_screen.js'
import HomeScreen from './src/app_component.js'
import { StackNavigator } from 'react-navigation';

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Landing: { screen: LandingScreen},
});

AppRegistry.registerComponent('HomeScreen', () => SimpleApp);

app_component.js

// Other imports ...
export default class HomeScreen extends Component {
  static navigationOptions = {
    title: 'Home Screen',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text  style={styles.instructions}> Hello CHannoo!!!</Text>
        <Text …

如何隐藏标签TabNavigator并仅显示icons？如果我执行以下操作:

const Tabs = TabNavigator({
  Home: {
    screen:MainHome,
    navigationOptions: ({ navigation }) => ({
        title: "Home",  //Tried to hide this for next tab Search.
        tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="home"/></View>
      })
  },
  Search: {
    screen:TestComp1,
    navigationOptions: ({ navigation }) => ({
      //If no title it shows the name as Search.
      tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="accessibility"/></View>
    })

  }
}, { 

   tabBarPosition: 'bottom',

   tabBarOptions: {
    showIcon: true,
    activeTintColor: '#e91e63',  //Not working for icons. …

当我根据进行登录和注销时，我的firebase方法会onAuthStateChanged()触发几次。它不是应该仅在登录时触发一次，而在注销时触发一次。结果是，注销后，将触发多次导航到上一页。这是代码：firebase-authenticationconsole.log

componentDidMount() {
    fbAuth.onAuthStateChanged(user => this.loginFunc(user));
}

loginFunc(user) {
   if (user) {
     console.log('LOGGED IN');
}else {
  console.log('LOGGED OUT');
  this.props.navigation.navigate('FbLogin');
}
console.log('onAUTH LOGGED IN: ', user);
}

这就是控制台的样子。如您所见，仅单击一次注销即可触发登录和注销。登录时，它会触发两次。

LOGGED OUT
FbLogin.js:46 onAUTH:  null
LoggedIn.js:27 LOGGED OUT
LoggedIn.js:30 onAUTH LOGGED IN:  null
FbLogin.js:44 LOGGED OUT
FbLogin.js:46 onAUTH:  null

我的注销按钮如下所示：

<TouchableHighlight //LOGOUT
   style={{
      ...
   }}
   onPress={() => {
      fbAuth.signOut();
      this.setState({ loginState: "You are logged out" });
   }}
   >
      <Text>Logout</Text>
   </TouchableHighlight>