标签: react-navigation

我正在使用react-navigation并且要在标题的右侧添加一个按钮，该按钮将导航到其他屏幕。但是在设置时navigationOptions，我想知道如何navigate在按下按钮时调用的回调函数中访问该函数：

const RootNavigationStack = StackNavigator({
  PokemonList: {
    screen: PokemonListWrapper,
    navigationOptions: {
      title: ({state}) => `Pokedex`,
      header: ({ state, setParams }) => {
        return {
          visible: true,
          right: (
            <Button
              title={'Add'}
              onPress={() => // navigate to new screen here
            />
          ),
        }
      }
    },
  },
, {
  headerMode: 'screen'
})

有什么想法可以实现吗？我当时正在考虑使用withNavigation，但仍不清楚如何使用。

我想从我的减少动作文件中导航。第一个屏幕是登录屏幕，因此在单击登录按钮后将调用redux动作创建者，reduce生成新状态。因此，在执行该操作之后，我想重新调配到仪表板。

我在用

反应本机+ Redux +反应导航

登录组件文件（LoginCmp.js）：

import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView,
  KeyboardAvoidingView
} from 'react-native';
import { connect } from 'react-redux';
import { fieldChange, LoginAction } from '../../actions';
import { Button, Section, Input, Alert } from '../Helpers';

LoginAction(){
  const payload = {
    email: this.props.email,
    password: this.props.password
  };
  this.props.LoginAction(payload); // Action call
}


render() {
    return (
      <KeyboardAvoidingView
    style={styles.container}
    behavior="padding"
      >
      <View>
    <ScrollView contentContainerStyle={styles.contentContainer}>
      <Text style={styles.headerText}> Login </Text>
      {this.alertMessage()}
      <Section>
        <Input
          placeholder="email@gmail.com" …

我正在使用react-navigation在react native中构建一个应用程序。在一个屏幕上，我需要显示一个简单的对话框，以确保用户确实要退出该屏幕。

我尝试添加BackHandler侦听器，但是当用户单击标题中的后退箭头时，该方法不适用。有什么办法可以防止用户在单击警报按钮之前过渡回来？

React Native 早前推出了SafeAreaView组件，它现在已作为react-navigation软件包的一部分提供，该软件包非常出色，解决了iPhone X上的问题，为Home Indicator（底部栏）留出了空间。

我尚无法确定的一件事是如何更改其样式，以使其“匹配”其余页面布局，无论我做什么，它都保持白色，并为下一个元素添加一些阴影从顶部到它。

以下是一些屏幕截图：

这是我使用的代码：

<Provider store={store}>
    <SafeAreaView style={{flex: 1}} forceInset={{'top': 'never'}}>
        <View style={{flex: 1}}>
            <Navigator/>
            <NotificationsContainer/>
        </View>
    </SafeAreaView>
</Provider>

如何修改此行为和用户界面？

谢谢 ：）

我想做一个简单的任务：成功登录后，将用户重定向到他的主页。为此，我使用react-navigation的StackNavigator：

// App.js

class App extends Component {
  render() {
    return (<RootStack />);
  }
}

const RootStack = createStackNavigator(
  {
    Login: { screen: Login, navigationOptions: { header: null }},
    Home: { screen: Home, navigationOptions: { header: null }}
  },
  {
    initialRouteName: 'Root'
  }
)

登录后如何防止用户返回登录界面？为了防止在android中使用后退按钮，我将使用此按钮：

// Home.js

import React, { Component} from 'react';
import { ... , BackHandler } from 'react-native';

class Home extends Component {
    constructor(props) {
        super(props);
        BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
    }
    onBackButtonPressAndroid = () => {
        return true;
    } …

我有两个StackNavigator。电影：

const MoviesStackNavigator = createStackNavigator({
  Movies: Movies,
  MovieDetails: MovieDetails,
},{
  initialRouteName: 'Movies',
})

和演员：

const ActorsStackNavigator = createStackNavigator({
  Actors: Actors,
  ActorDetails: ActorDetails,
},{
  initialRouteName: 'Actors',
})

我在TabNavigator中使用它们：

const RootTabs = createBottomTabNavigator({
  Movies: {
    screen: MoviesStackNavigator,
    navigationOptions: {
      tabBarLabel: 'Movies'
    }
  },
  Actors: {
    screen: ActorsStackNavigator,
    navigationOptions: {
      tabBarLabel: 'Actors'
    }
  },
})

当用户更改选项卡时，我希望他到达该选项卡的根组件（Movies或Actors），而不是堆叠组件（MoviesDetails或ActorsDetails）。换句话说，当用户退出选项卡时，该选项卡中的StackNavigator应重置为根组件。

我的第一种方法是StackActions.reset在初始化选项卡中的根组件时尝试重置其他选项卡（用户刚刚退出），但是该库至少以这种方式阻止了导航器之间的交互。

那么，有什么想法吗？

我正在创建过滤器页面屏幕。在此屏幕上，一旦我填写了要过滤数据的所有数据，我将单击“保存”按钮，这会将我重定向到将显示新过滤数据的主页。主页已经显示了常规数据，但是如果我想查看过滤器数据，那么我将从过滤器屏幕中过滤该数据。
但是这里我有问题是我无法重定向到主页。我用于重定向的代码对于我的整个应用程序都是相同的，可以正常运行。我只在重定向到主页时遇到问题，控制台中没有显示错误，但会打印我在函数中编写的消息。而不是什么也没做。

import NavigationService from '../../components/NavigationService';
    onSaveClicked() {

        console.log('Filter is in progress');
        const { navigation } = this.props;
        navigation.navigate('home');
        const { userprofile } = this.props;
        const  { type } = userprofile;
        NavigationService.navigate('HomeStackScreen1', {type:type});


      }
  renderButton() {
    return (
      <Button
        style={{ alignItems: 'center' }}
        onPress={this.onSaveClicked.bind(this)}
      >
        Filter
      </Button>
    );
  }

navigationService.js

    import { NavigationActions,navigation } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

function getParams(param){
  console.log("param: "+param); …

所以基本上我正在学习本地反应。我使用的是react导航包，我只想在我的堆栈导航器上显示一个简单的标题，但标题已切断。堆栈导航标题

这是我的 App.js

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './screens/HomeScreen'
import DetailsScreen from './screens/DetailsScreen'

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(RootStack)

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

这是我的HomeScreen.js

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

export default class HomeScreen extends React.Component {

  static …

我是新来的本地人。我想用反应导航创建一个项目。我收到此错误：

SyntaxError: Unexpected token   in JSON at position 0
at JSON.parse (<anonymous>)
at FileStore.get(:\Users\fz\Documents\androidproject\test2\node_modules\metro-cache\src\stores\FileStore.js:26:19)
at C:\Users\fz\Documents\androidproject\test2\node_modules\metro-cache\src\Cache.js:76:40
at Generator.next (<anonymous>)
at step (C:\Users\fz\Documents\androidproject\test2\node_modules\metro-cache\src\Cache.js:18:30)
at C:\Users\fz\Documents\androidproject\test2\node_modules\metro-cache\src\Cache.js:37:14
at new Promise (<anonymous>)
at C:\Users\fz\Documents\androidproject\test2\node_modules\metro-cache\src\Cache.js:15:12
at Cache.get (C:\Users\fz\Documents\androidproject\test2\node_modules\metro-cache\src\Cache.js:102:7)
at C:\Users\fz\Documents\androidproject\test2\node_modules\metro\src\DeltaBundler\Transformer.js:166:34

这是我的app.js：

import React from 'react';
import Input from './input.js';
import Kalkulator from './kalkulator.js';
import { createBottomTabNavigator, createAppContainer } from 'react-        
        navigation'; // Version can be specified in package.json

const RootStack = createBottomTabNavigator({
    Input: Input,
    Kalkulator: Kalkulator
  }
);

export default createAppContainer(RootStack);

这是我的package.json：

{
  "name": "test2", …

我一直在尝试react-navigation在新的React Native应用中进行设置。当我使代码/屏幕正常工作时，按照v4 docs在库中添加后，Jest导致了我的问题。

我安装react-navigation，react-native-reanimated，react-native-gesture-handler，和react-native-screens@^1.0.0-alpha.23。然后，我进入ios文件夹并运行pod install。因为我使用的是React Native v0.61，所以它们应该已经自动链接了。

当我运行默认的Jest测试时，出现如下错误：

  ? renders correctly (106ms)

  console.warn node_modules/react-native/Libraries/Animated/src/NativeAnimatedHelper.js:270
    Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

我搜索了此错误，大多数建议的答案是将其放入测试文件中：

jest.mock('NativeAnimatedHelper');

但是，当我尝试这样做时，Jest抱怨如下错误：

 FAIL  __tests__/App-test.tsx
  ? Test suite failed to run

    Cannot find module 'NativeAnimatedHelper' from 'App-test.tsx'

       6 …