标签: react-navigation

我一直试图启动并运行反应导航,但是当我尝试将导航项目移动到他们自己的组件中时遇到了问题.

HomeScreen.js

import React, { Component } from 'react';

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

import NavButton from '../components/NavButton'

class HomeScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
        Hello World
        </Text>

        <NavButton
        navigate={this.props.navigator}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});


export default HomeScreen;

然后在NavButton组件中,我尝试导航到新屏幕.

 class NavButton extends Component {
  render() {
    return (
      <View>
        <Button
        title="Go to About"
        onPress={() => this.props.navigator.navigate('About')} …

我正在使用react-navigation进行路由.我想在一个组件上动态隐藏或显示标题.有办法吗？

我像这样动态更改headerLeft但无法找到任何方法来为整个标头执行此操作.

static navigationOptions = ({ navigation }) => ({
    headerRight: navigation.state.params ? navigation.state.params.headerRight : null
});

this.props.navigation.setParams({
        headerRight: (
            <View>
                <TouchableOpacity onPress={() => blaa} >
                     <Text>Start</Text>
                </TouchableOpacity>
            </View>
        )
});

我想要这样的东西 - 隐藏/显示基于状态的标题:

this.props.navigation.setParams({
        header: this.state.header
});

每次用户打开我的一个反应原生屏幕时,我都会尝试从AsyncStorage加载JSON(我正在使用StackNavigator).此JSON包含有关我的状态应设置为什么的信息.

如何调用每次打开此屏幕时运行的函数？

更多信息:我编写了一个函数,根据从AsyncStorage加载的JSON更新我的状态.从按钮调用时,该功能完美无缺,但是当调用该功能时render(),我的部分屏幕会冻结,某些按钮不再可触摸.奇怪的是,只有TextInput仍然有效.

将展会从(16.0.0)更新为(24.0.0)并将导航从(git + https://github.com/react-community/react-navigation.git)反映到(^ 1.0.0-beta.21) )版本,发生此错误

我使用这个主要依赖项工作在本机应用程序上:

• 反应原生
• 反应原生路由器通量
• 做出反应
• 博览会

我正在使用这个package.json:

"dependencies": {
    "expo": "23.0.4",
    "humps": "^2.0.0",
    "install": "^0.10.1",
    "lodash": "^4.17.4",
    "native-base": "^2.3.5",
    "react": "16.0.0",
    "react-native": "0.50.4",
    "react-native-extend-indicator": "^0.1.2",
    "react-native-keyboard-aware-scroll-view": "^0.4.2",
    "react-native-maps": "^0.19.0",
    "react-native-maps-directions": "^1.3.0",
    "react-native-modal-datetime-picker": "^4.13.0",
    "react-native-qrcode": "^0.2.6",
    "react-native-router-flux": "4.0.0-beta.24",
    "react-native-svg-uri": "^1.2.3",
    "react-native-swiper": "^1.5.13",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation-redux-debouncer": "^0.0.2",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "swagger-client": "2.1.32"
  }

应用程序正在使用expo所以我使用以下命令安装依赖项:

• 纱线安装

然后运行应用程序

• yarn start --reset-cache

我工作正常,因为我想添加一个新的依赖项,所以我删除了node_modules文件夹和yarn.lock文件,添加了新的依赖项并再次执行yarn安装.

之后,我在打开应用程序时遇到此错误:

TypeError:undefined不是函数(评估'addListener')

它与react-navigation有关,但我使用的是react-native-router-flux 4.0.0-beta.24,它在内部使用react-navigation ^ 1.0.0-beta.19.

我最近注意到使用react-navigation的人对此有一些麻烦(https://github.com/react-navigation/react-navigation/issues/3416)但使用beta.28版本.

如果我回到之前的node_modules文件夹(从垃圾箱)我的应用程序运行良好,所以..可能是因为我的package.json 的^符号的某些依赖性不再兼容..也许thunk或反应本机路由器与我的反应本机版本的通量.

有任何想法吗？

当我使用react thunk中间件时,这是代码的一部分:

import {applyMiddleware, …

我将React Navigation用作应用程序的导航器组件。我想更改堆栈导航器的字体系列。目前，我这样做是为了更改iOS中的字体系列，并且效果很好：

const LoggedInStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'payX',
      headerTitleStyle: {
        fontFamily: "my-custom-font"
      }
    }
  }
});

但不适用于Android设备。如何更改代码以使其在Android中也能正常工作？

在内部调用函数时出错navigationOptions。

static navigationOptions = {
    tabBarIcon: ({ tintColor })=> (
      <Icon name='ios-add-circle' style={{ color: tintColor}} />
    ),
    tabBarOnPress: () => {
      this.callingFun();
    },
  }

  callingFun = ()=> {
    console.log('tabBarOnPress:');
  }

错误：

在React Navigation 3.0中，他们添加了将默认参数传递到屏幕的功能。问题是我想将这些参数传递给嵌套的stackNavigator，但我不知道该怎么做。这些是我的导航器：MainDrawer.js：

    const MyDrawerNavigator = createDrawerNavigator({
      Anime: {
        screen: SerieNavigation,
        params: { type: "anime" },
        path: "anime/:anime"
      },
      Tv: {
        screen: SerieNavigation,
        params: { type: "tv-show" },
        path: "tv/:tv"
      },
      Film: {
        screen: SerieNavigation,
        params: { type: "film" },
        path: "film/:film"
      }
    });

    const AppContainer = createAppContainer(MyDrawerNavigator);

    export default AppContainer;

SerieNavigation.js：

    const SerieStack = createStackNavigator(
      {
        Content: {
          screen: SearchScreen,
          params: { type: "anime" } //<-- HERE I WOULD LIKE TO DO SO params: { type: props.navigation.state.params.type }
        }, …

我想React Native同时使用side menu和设置一个应用tab menu。

我正在关注本教程。

我的密码。

我得到错误：

未定义不是函数（'...（0，_reactNavigation.TabNavigator）...'附近）

您可以在这里看到：

预览一些文件：

App.js

import React from 'react';
import { Drawer } from './src/navigators';

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

navigators.js

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

// Navigators
import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation'

// StackNavigator screens
import ItemList from './ItemList'
import …

最近几天，我一直在努力向屏幕添加动画标题。我已成功完成此操作，但现在我想默认将其用作标题，而不是将代码复制并粘贴到我希望使用的所有屏幕中。目前，动画标头已在屏幕中实现，如下所示：

渲染标题：

static navigationOptions = ({ navigation }) => {
    return {
        header: () => {
            return (
                <SafeAreaView style={{
                    height: 0,
                    overflow: 'visible',
                }}>
                    <Animated.View style={{height: 80, width: 80,
                        transform: [ {translateY: navigation.getParam('headerScrollY', 0)}]
                    }}>
                        <TouchableOpacity style={{padding: 20}} onPress={() => navigation.goBack()}>
                            <Icon.Ionicons  style={{color: '#ffffff', width: 50, height: 50}} name={'ios-arrow-round-back'} size={50} />
                        </TouchableOpacity>
                    </Animated.View>
                </SafeAreaView>
            )
        }
    }
};

设置状态：

constructor() {
    super();
    this.state = {
        headerScrollY: new Animated.Value(0),
    };
}

设置动画插值并将值传递给导航道具（这是我稍后在渲染标题时将要访问的内容）

componentWillMount() {
    this.props.navigation.setParams({
        headerScrollY: this.state.headerScrollY.interpolate({
            inputRange: [0, 80], …