标签: react-navigation

我DrawerNavigator在我的应用程序中使用了反应导航.没有任何自定义,Android状态栏为蓝色,而不是黑色.

我试着这样做

StatusBar.setBackgroundColor('#000000');

但它只能工作几秒钟,然后又会变回蓝色.似乎我正在使用的东西将状态栏颜色设置为蓝色.但是,我试图删除所有依赖项并且只保留react-navigation,它仍然会发生,而react-navigation的文档也没有说明这一点.

如何使用react-navigation将状态栏颜色设置为黑色？

我正在构建一个应用程序,其导航基于react-navigation库中的DrawerNavigator.

这个导航器有3个标签:

• 2个常规标签
• 1 StackNavigator命名为"搜索"

StackNavigator包含一个允许用户搜索项目的屏幕,以及一个用户可以看到搜索结果的第二个屏幕.

我不希望搜索结果页面成为DrawerNavigator的选项卡,这就是我实现此结构的原因.

问题是:如果用户已经执行了搜索,当他点击"搜索"选项卡时,他不会返回搜索屏幕而是返回搜索结果屏幕.我希望用户回到搜索屏幕.

我怎样才能做到这一点？

当使用react-navigator时,我收到错误说明

这个导航器有导航和容器道具.所以目前还不清楚它是否应该拥有自己的国家.删除道具:'completedOrders,isLoading,hasError,getCompletedOrders'.如果导航器应从导航道具中获取其状态.如果导航器应保持自己的状态,请不要传递导航道具

如何解决这个问题.我想将completedOrders传递给Tabnavigator(AdminCompletedOrdersTab).

以下是我的代码

const AdminCompletedOrdersTab = TabNavigator({
    completedOrdersTab: { screen: CompletedOrders },
    rejectedOrdersTab: { screen: RejectedOrders },
    cancelledOrdersTab: { screen: CancelledOrders }
});

class CompletedOrdersScreen extends Component {
    static navigationOptions = {
        title: "Completed Orders"
    }

    componentDidMount() {
        this.props.getCompletedOrders(this.props.user);
    }
    render() {
        return(
            <AdminCompletedOrdersTab {...this.props}/>
        )

    }
}

const mapStateToProps = (state) => {
    return ({
        completedOrders: state.completedOrders.completedOrders,
        isLoading: state.completedOrders.isLoading,
        hasError: state.completedOrders.hasError
    })
}

const mapDispatchToProps = (dispatch) => {
    return ({
        getCompletedOrders: bindActionCreators(getCompletedOrders, dispatch)
    })
}



export default …

问题很简单，我知道同一问题有很多答案，但是我设置了自己的App.js文件，但我尝试了几乎所有方法，但都没有成功。

所以我App.js看起来像这样

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar
} from 'react-native';
import { createStackNavigator  } from 'react-navigation';
import { Header, Button, Spinner } from './src/components/comman';
import SplashScreen from 'react-native-splash-screen';
import LoginForm from './src/components/LoginForm';
import SignupForm from './src/components/SignupForm';
import Home from './src/components/Home';
import ForgetPassword from './src/components/ForgetPassword';


import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
const App = createStackNavigator ({
  Login: { screen: LoginForm },
  Home: …

navigation当屏幕与路由器位于不同的文件中时，定义屏幕道具类型的最佳方法是什么？假设我有一个文件，我在其中定义了路线：

//Router.tsx

type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
}

const Stack = createStackNavigator<RootStackParamList>();

// Component rendering navigator
const Router = () => {
   .
   .
   .
}

然后我有单独的屏幕文件：

// Home.tsx


// here has to be the same RootStackParamList
// that we've already defined in Router.tsx
type = HomeScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  "Home"
>;

type Props: {
  navigation: HomeScreenNavigationProp
}


const Home = ({navigation}: Props) => {
  .
  .
  .
}

我是否必须RootStackParamList一遍又一遍地复制到每个屏幕或创建类似types.ts文件的内容并从那里导入它？有没有更好的方法来处理呢？我几乎在每个组件中都使用navigation。

我正在使用反应导航器创建屏幕，但当屏幕打开时我无法更改标题栏的选项

我的代码（App.js）：

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{
        headerTitleAlign: 'center',
        headerTitle: props => <LogoTitle {...props} />,
        headerRight: props => <HeaderRight {...props} />,
        headerStyle: {
          backgroundColor: '#F46A0D'
        },
        headerTintColor: '#fff',
      }}>
        <Stack.Screen name="Search" component={SearchScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

我的 SearchScreen.js：

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

const SearchScreen = ({ navigation }) => {
    navigation.setOptions = {
        headerTitle: props => <TextInput {...props} placeholder="Search" placeholderTextColor="#FFFF" style={{ …

我有一个使用react-navigation@5.1的react-native应用程序

我有一个带有多个选项卡的 TabNavigator（嵌套在堆栈导航器内）。每个选项卡都包含另一个 StackNavigator。这些选项卡堆栈之一具有列表屏幕和详细信息屏幕。

该应用程序设置为当应用程序在后台时接收推送通知。当用户按下推送通知时，它会打开应用程序并将其导航到详细信息/:id 屏幕。

问题是，如果用户尚未位于列表屏幕上，则后退按钮没有正确的历史记录并且不会出现。

我将如何确保详细信息屏幕的后退按钮始终将用户带到列表屏幕？

这是我的嵌套导航器的描述

<NavigationContainer>
 <Stack.Navigator>
    <Stack.Screen name="loading">
    <Stack.Screen name="auth">
    <Stack.Screen name="app">
      <Tabs.Navigator>
         <Tabs.Screen name="community">
           <Stack.Navigator>
              <Stack.Screen name="list">.  <- list
              <Stack.Screen name="detail"> <- detail
           </Stack.Navigator>
         </Tabs.Screen>
         <Tabs.Screen name="profile">
           <Stack.Navigator>
              <Stack.screen name="edit">  <- user may already be on this screen
              ...
           </Stack.Navigator>
         </Tabs.Screen>
         ... more tabs and stacks
    </Stack.Screen>
 </Stack.Navigator>
</NavigationContainer>

每当用户收到推送通知时，他们就已经位于选项卡导航器内的堆栈导航器之一上。同样，问题是用户可能位于个人资料选项卡内的编辑屏幕上。我需要将它们重定向到社区选项卡的详细信息屏幕，但确保历史记录包含后退功能的列表屏幕。

我正在构建一个反应本机应用程序，我想将滚动视图作为包装器添加到所有 UI 屏幕。我已将其包装Stack.Navigator在 ScrollView 中，但内容被剪切在屏幕底部，屏幕结束后没有可见的内容。请看下面的代码

应用程序.tsx

export default function App() {
  const [loading, setLoading] = useState(true);
  return loading ? (
    <AppSplashScreen onLoadComplete={() => setLoading(false)} />
  ) : (
    <NavigationContainer>
      <AuthProvider>
        <Provider>
          <ScrollView
            contentContainerStyle={{ minHeight: "100%", overflow: "visible" }}
            style={styles.container}
          >
            <Content />
          </ScrollView>
        </Provider>
      </AuthProvider>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 32,
    padding: 16,
    minHeight: "100%",
  },
});

内容.tsx

const Content = () => {
  return (
    <Stack.Navigator
      initialRouteName="LandingPage"
      screenOptions={{
        headerShown: false,
      }}
    > …

React Native 的新手。

react-router是一个流行的网络应用程序导航库。同一个库有一个包，它提供了用于在 RN 中导航的 API react-router-native，. 文档

读完 react-navigationpitch和anti-pitch后，我很好奇了解两者内部工作原理的区别。

这里和这里有类似的问题，但答案很固执，无法指出两者之间工作的差异。

在此索取有关这两个图书馆的任何有用信息！任何一个比另一个表现更好的特定用例也会有所帮助！

我正在使用 React Navigation 6 设置 URI 方案深度链接，以下是我的配置方式：

const linking = {
  prefixes: ["wagal://"],
  config: {
    ResetPassword: {
      path: "reset/password/:token",
      params: {
        token: null,
      },
    },
  },
};

function homeStack() {

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Stack.Navigator>
        <Stack.Screen component={ResetPassword} name="ResetPassword" />
        //...
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如果我去wagal://reset/password?token=123456789它会将我重定向到重置密码屏幕中的应用程序，但我无法从中获取令牌参数ResetPassword：

function ResetPassword({ route }) {
  const {token} = route.params;
  // ...
}

它抛出以下错误：

undefined is not an object (evaluating route.params.token)

但是如果我尝试使用下面的代码在PasswordReset屏幕中获取整个URL，它会显示带有令牌的整个URI：

  useEffect(() => {
    Linking.getInitialURL().then((url) => {
      console.log(`url`, url);
    }); …