在React Navigation中,可以通过将uriPrefixprop 传递给顶级导航器,或者通过将{containerOptions: {URIPrefix: PREFIX}}第二个参数传递给内置导航器(例如StackNavigator)来利用深度链接.

当Redux与React Navigation集成时,顶级导航器将传递给navigationprop.

但是,在RN应用程序上同时启用Redux和深度链接时.uriPrefix和navigationprop都需要传递给顶级导航器,这会引发错误,

这个导航器有导航和容器道具,因此不清楚它是否应该拥有自己的状态.

const S1 = () => <View><Text>S1 text</Text></View>;
const S2 = () => <View><Text>S2 text</Text></View>;
const S3 = () => <View><Text>S3 text</Text></View>;

const AppNav = StackNavigator(
  {
    S1: {screen: S1, path: 's1'},
    S2: {screen: S2, path: 's2'},
    S3: {screen: S3, path: 's3'}
  }
);

@connect(state => ({nav: state.nav}))
class App extends Component {
  render() {
    const
      { dispatch, nav } …

我几乎从TabNavigator文档中获取了示例代码,而图标/图像根本没有出现在iOS或Android上.即使标签覆盖似乎也没有生效.我究竟做错了什么？

这是我一直在使用的文档的链接:https: //reactnavigation.org/docs/navigators/tab

这是我的代码:

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Not displayed',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Notifications',
    tabBarIcon: ({ tintColor }) => ( …

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

删除用户令牌后,用户会重定向到登录页面.但是,如果我与其他用户登录,主页面仍会显示以前的用户信息.

这是因为我没有刷新主页面.如何在反应导航中手动重新初始化(？)主页？

MainPage(Logged in as 'matt') -> Logout -> LoginPage 
-> (here I want to refresh MainPage so it can be loaded once new user login) 
-> MainPage(Should be logged in as other user 'kobe')

MainPage通过componentWillMount接收用户JSON数据

  componentWillMount() {
    // retrieve user data 
    this.props.retrieveCurrentUser(this.props.token);
  }

以防您需要我的代码......

1)这是Root导航

const RootTabNavigator = TabNavigator ({
    Auth: {
      screen: AuthStackNavigator,
    },
    Welcome: {
      screen: WelcomeScreen,
    },
    Main: {
      screen: MainTabNavigator,
    },
  }, {

2)这是Auth Stack Navigator(登录页面)

export default StackNavigator ({
  Autho: {
    screen: AuthScreen,
  }, …

我正在尝试使用react-navigation,但是当我将每个屏幕的组件移动到多个文件中时,我无法使用它.我总是得到这个错误:"路由'Home'的组件必须是React组件".如果我将所有代码移动到一个文件中,则不会发生此错误,因此我不确定区别是什么.

这是我的App.js:

import React from 'react';
import { StackNavigator } from 'react-navigation';
import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native';

import { HomeScreen } from './screens/HomeScreen';
import { JoinScreen  from './screens/JoinScreen';
import { HostScreen } from './screens/HostScreen';


const Root = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: JoinScreen,
    }
  }, 
  {
    initialRouteName: 'Home',
    headerMode: 'none',
  }
);

export default class App extends React.Component {
  render() {
    return (
      <Root />
    )
  }
}

这是我的.screens/HomeScreen.js

import …

我想根据启用的功能更改屏幕上的底部选项卡.此功能列表通过登录API调用填充.

目前我有以下内容:

const TabRouteConfig = {
  Home: DashboardScreen,
  FeatureA: FeatureA,
  FeatureZ: FeatureZ,
};

const TabNavigatorConfig = {
  initialRouteName: 'Home',
  order: [
    'Home',
    'Feature A',
  ],
  tabBarPosition: 'bottom',
  lazy: true,
};

const TabNavigator1 = createBottomTabNavigator(
  TabRouteConfig,
  TabNavigatorConfig,
);

// Set the tab header title from selected route
// https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header
TabNavigator1.navigationOptions = ({ navigation }) => {
  const { index, routes } = navigation.state;
  const { routeName } = routes[index];

  return {
    headerTitle: routeName,
  };
};

const TabNavigator2 = createBottomTabNavigator(
  TabRouteConfig,
  { …

const viewableWindowHeight = Dimensions.get（'window'）。height-Header.HEIGHT-???

如何获得TabBar的高度？如果iPhone是X，该怎么办？我该如何考虑？

如果我设置headerTransparent: true通常在其下方呈现的其他内容，则会在其下方移动。我该如何避免呢？

我的代码：

export class RegisterScreen extends Component {
  static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerTransparent: true,
  };
  render() {
    return <Display onSignUpPressed={() => {}} onHelpPressed={() => {}} />;
  }
}

具有透明标题（与:(重叠）：

没有透明标题：

我想使内容对齐，就好像标题具有高度一样。所以我希望内容像第二张图片一样，但要像第一张图片一样具有透明的标题。

我正在使用 react-native-web 和 react-navigation 3.x。

然后我正在运行 react-scripts start a 并且出现此错误：

./node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js
SyntaxError: <path_to_my_app>/node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js: Unexpected token (33:11)

我该如何解决？

当我切换到此屏幕时，它将执行一些API调用以获取最新数据。但是，当我从另一个带有钩子版本的导航堆栈过渡时，它似乎并不会触发didFocus事件触发api调用，而它与类版本很好地兼容。

如何使钩子版本具有与类版本相同的行为？

这两个版本有什么区别？

类组件版本

class someScreen extends Component {
    componentDidMount() {
       const {
           navigation,
       } = this.props;

       this.navFocusListener = navigation.addListener('didFocus', () => {
         // do some API calls here
         console.log("class version");
         API_CALL();
       });
    }

    componentWillUnmount() {
        this.navFocusListener.remove();
    }
}

控制台输出

从其他导航堆栈到此屏幕的转换：类版本

同一堆栈中屏幕之间的转换：类版本

挂钩版本

const someScreen = ({
 navigation,
}) => {
    useEffect(() => {
        const navFocusListener = navigation.addListener('didFocus', () => {
        // do some API calls here
        API_CALL();
        console.log('hooooks');
    });

    return () => {
        navFocusListener.remove();
    };
  }, []);
}

控制台输出 …