标签: react-navigation

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

我试着这样做

StatusBar.setBackgroundColor('#000000');

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

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

我正在使用最新的react-native(0.45.1)和react-navigation(1.0.0-beta.11).因为使用react-navigation,我不能使用ReactNative.StatusBar,所以我不知道如何使状态栏保持半透明状态.也许在Android和iOS上都有效,THX!

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

这个导航器有3个标签:

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

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

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

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

我怎样才能做到这一点？

我真的无法让我的导航工作.我正在使用react-navigation(StackNavigator).

这是我的结构:http: //i.imgur.com/IKExx9g.png

我的导航工作原理HomeScreen.js:我导航HomeScreen.js到NewScreen.js没有问题.

App.js:

import React from 'react';
import {
    StatusBar, AppRegistry
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {HomeScreen} from './screens/HomeScreen';
import AboutScreen from "./screens/AboutScreen";
import NewScreen from "./screens/NewScreen";
import CalendarScreen from "./screens/CalendarScreen";
import AddAgendaScreen from "./screens/AddAgendaScreen";

const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    About: {screen: AboutScreen},
    New: {screen: NewScreen},
    Calendar: {screen: CalendarScreen},
    AddAgenda: {screen: AddAgendaScreen}
});

console.disableYellowBox = true;
StatusBar.setHidden(true);
export default SimpleApp; // Export root navigator as …

当使用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: …

我开始使用react-native,我正在尝试创建一个"hello word"应用程序来查看它是如何工作的.我在屏幕顶部制作了一个带有"标签"的菜单

在app.js中我添加了createStackNavigator来设置我的路由 App.js

import { ... }
const AppNavigator = createStackNavigator({     
    Main: { screen: Main},
    CScreen: {screen: FormCScreen},
});

type Props = {};
export default class App extends Component<Props> {
render() {
    return (
        <AppNavigator />    
    );
  }
}

这是我的主屏幕,我在其中设置标签.

Main.js

imports {AScreen, BScreen} ...
const Tab = createMaterialTopTabNavigator(
{
   A: AScreen,
   B: BScreen,
},
{
  tabBarPosition: 'top',

});

export default class Main extends Component {

render() {
    return (  
      <Tab/>
    );
  }
}

BScreen.js

现在在我的一个BScreen选项卡上,我想点击一个按钮,我希望它加载屏幕(CScreen)

imports …

我的导航结构如下：

const App = () => {
  const prefix = 'test://';
  return <AppNavigator uriPrefix={prefix} />;
};

const AppNavigator = createSwitchNavigator({
  splash: SplashScreen,
  auth: AuthStack,
  main: HomeStack,
});

const AuthStack = createStackNavigator({
  landing: LandingScreen,
  login: {
    screen: LoginScreen,
    path: 'page/login',
  },
  register: {
    screen: RegisterScreen,
    path: 'page/signup',
  },
});

const HomeStack = createStackNavigator({
  home: HomeScreen,
  details: {
    screen: DetailsScreen,
    path: 'details/:assetId',
  },
  upsell: {
    screen: UpsellScreen,
    path: 'page/upsell',
  },
});

我的深层链接URI是：

test://page/login
test://page/signup
test://details/12345
test://page/upsell

链接到任何这些URI时，我总是被带到，SplashScreen这是我应用程序的第一个屏幕。如何正确链接到嵌套导航器并链接到正确的屏幕？

如果我考虑一个例子

https://app.abc.com/login 

这会在我的应用中打开登录页面。但是如果链接像

https://app.abc.com/loginUser //This link is a route in web app

这不会在App中打开登录页面，因为路径未在路线中定义

现在的要求是，每当用户单击“第二”链接时，即使这样，它也应该在App中而不是在Web中打开登录组件。即。同一组件有多个路由，还是可以为此类路由打开通用组件？我们可以在React-Native中实现吗？

我正在使用，react-navigation并且有一个动态标头，所以我正在使用setParams并在标题中获取它。

const MyComponent = ({navigation}) => {
    useEffect(() => {
        const { setParams, state } = navigation
        const { params = {} } = state
        const { description } = params
        setParams({ headerTitle: description })
    }, [])

    return (...)
}

MyComponent.navigationOptions = ({ navigation }) => ({
    title: navigation.getParam('headerTitle')
})

这里的问题是我只想执行setParams一次（所以我使用[]），但是得到警告（eslint(react-hooks/exhaustive-deps)）并说我需要添加navigation到依赖项数组。

如果我添加navigation到依赖项数组，它将成为无限循环。

setParam更新=> navigation调用=> setParam更新=> navigation并继续...

如何setParam只调用一次，并避免相应地正确响应钩子规则？