标签: react-navigation

我正在使用create-react-native-app。我想使用react-native-vector-icons

但它没有在 android 屏幕上显示任何内容（我在 expo 应用程序上查看它）

这是我所做的：

应用程序.js：

       const Courses = TabNavigator({
  ReactCourses: { screen: ReactCourses },
  NativeCourses: { screen: NativeCourses },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
    swipeEnabled: true,
    showIcon:true,
  },
});

ReactCourses.js：

     import Icon from 'react-native-vector-icons/MaterialIcons';
    static navigationOptions = {
    tabBarLabel: 'React Courses',
    tabBarIcon:({ tintColor }) => (
        <Icon
          name={'home'}
          size={26}
          style={[styles.icon, {color: tintColor}]} />
      )

  }

我正在使用光滑的React Navigation并遵循此处的嵌套导航配方，但是我不知道如何将“ this”传递给我的导航。对不起，对不起。

这是我的一般结构概述：

class MyApp extends Component {
  render() {
    return (
      <StackNavigation
        screenProps={this.state}
      />
    )
  }
}

const MainScreenNavigator = TabNavigator(
  {
    Awesome: { screen: Awesome } // How do I pass this.state?
  }
)

const routesConfig = {
  Home: { screen: MainScreenNavigator },
  Profile: { screen: Profile }
}

const StackNavigation = StackNavigator(routesConfig, {initialRouteName: 'Home'})

那么如何将this.state传递给MainScreenNavigator？

我在同一个 index.android.js 文件中有这个简单的代码：

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

// First Page
class FirstPage extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello First Page</Text>
        <Button 
          onPress={() => navigate('SecondPage')}
          title="Go to second page"
        />
      </View>
    );
  }
}

// Second Page
class SecondPage extends Component {
  static navigationOptions = {
    title: 'Second Page', …

我正在将Jest与Enzyme一起使用，并且我拥有此组件，其中包括navigate方法调用：

export class LeadList extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <List>
        {this.props.data.allLeads.map((lead, i) => {
          return (
            <ListItem
              key={i}
              onPress={() =>
                navigate('Details', lead.id)
              }
            />
            // ...
            </ListItem>
          )})}
      </List>
    );
  }
}

我正在尝试测试它是否被正确调用，因此我将其组合在一起：

const testProps = props => ({
  data: {
    allLeads: [
      {id: 1, name: 'John Doe'},
      {id: 2, name: 'Jane Doe'}
    ],
    loading: false,
  },
  navigation: jest.fn((options, callback) => callback('Details', 1)),
  ...props,
})
describe('interactions', () => {
  let …

我正在尝试创建一个带有反应导航的新反应本机应用程序。

我做了以下事情：

1.) create-react-native-app myAppName

2.) cd myAppName/

3.) npm install --save react-navigation

4.) 期望成功安装 react-navigation 但我得到：

C:\Users\Maima\Documents\GitHub\React\test>npm install --save react-navigation
npm WARN rm not removing C:\Users\Maima\Documents\GitHub\React\test\node_modules
\.bin\jest.cmd as it wasn't installed by C:\Users\Maima\Documents\GitHub\React\t
est\node_modules\jest
npm WARN rm not removing C:\Users\Maima\Documents\GitHub\React\test\node_modules
\.bin\jest as it wasn't installed by C:\Users\Maima\Documents\GitHub\React\test\
node_modules\jest
npm WARN rm not removing C:\Users\Maima\Documents\GitHub\React\test\node_modules
\.bin\rimraf.cmd as it wasn't installed by C:\Users\Maima\Documents\GitHub\React
\test\node_modules\rimraf
npm WARN rm not removing C:\Users\Maima\Documents\GitHub\React\test\node_modules
\.bin\rimraf as it wasn't installed by C:\Users\Maima\Documents\GitHub\React\tes
t\node_modules\rimraf
npm WARN rm …

我正在尝试按照此处所述在 react-navigation 中设置身份验证流程。我可以在屏幕之间导航，但不能传入道具。

在登录屏幕中，我们导航到应用程序，如下所示：

this.props.navigation.navigate('App', {user: "hello"});

然后在应用程序中，我们尝试user按如下方式访问该值：

const { params } = this.props.navigation.state;
const userId = params ? params.user : null;

打印出来params如下：

{routeName:"Home",key:"id-1524078856706-13"}

我做了一个简单的小吃来演示这个问题。似乎上述方法仅适用于 StackNavigator？我必须恢复到 StackNavigator 吗？

我创建了一个组合组件来将 TouchableNativeFeedback 组合到 wrapperComponent。

export default function withFeedback2(
    WrappedComponent
) {
    return class extends BaseComponent {
        constructor(props) {
            super(props);
        }

        render() {
            return (
                <View>
                    <TouchableNativeFeedback
                        onPress={() => this.props.onContainerViewPress()}

                    >
                        <WrappedComponent {...this.props} />
                    </TouchableNativeFeedback>
                    {/* <TouchableOpacity
                        onPress={this.props.onContainerViewPress ? () => this.props.onContainerViewPress() : null}

 >
                        <WrappedComponent {...this.props} />
                    </TouchableOpacity> */}
                </View>
            );
        }
    };
}

但是TochableNativeFeedback 的 OnPress事件没有触发。而 OnPress 事件被正确触发，并且如果 wrappercomponent 包装在 TouchableOpacity 下，则调用 wrappercomponent 的onContainerViewPress道具。

我正在 Android 平台上对此进行测试。

TL; DR：我的测试崩溃了，因为链接到React Navigation的以下错误：

/path-to-app/react-native/myApp/node_modules/react-navigation/src/views/withNavigation.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                             ^^^^^^
SyntaxError: Unexpected token import

      127 | }
      128 |
    > 129 | export default withNavigation(
          |                                ^
      130 |   connect(
      131 |     null,
      132 |     { loginSuccess }

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.get withNavigation [as withNavigation] (node_modules/react-navigation/src/react-navigation.js:166:12)
      at Object.<anonymous> (app/components/LoginForm/LoginForm.js:129:32)

奇怪的是，我使用一个命名的导出，这就是为什么甚至不应该加载React Navigation的原因。

我正在尝试为我的登录表单编写单元测试。这是表格的代码：

import React, { Component } from "react";
import { View } from "react-native";
import { connect } from "react-redux";
import { Formik } from "formik";
import { …

我正在使用react-navigation（https://reactnavigation.org），并且尝试禁用当用户向右/向左滑动时打开侧抽屉的选项

我浏览了文档，找不到能解决问题的选项

const RootStack = createDrawerNavigator(
  {
    Login: {
      screen: Login,
    },
    Components: {
      screen: Components
    },
    Home: {
      screen: Home
    }
  },
  {
    initialRouteName: 'Login',
    gesturesEnabled: false,
    headerMode: 'none',
    contentComponent: SideBar,
    contentOptions: {
      labelStyle: {
        color: 'white'
      }
    }
  }
);

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }

  async componentWillMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      'Montserrat-Light': require("./app/assets/fonts/Montserrat-Light.ttf"),
      'Montserrat-Medium': require("./app/assets/fonts/Montserrat-Medium.ttf")
    });
    this.setState({ loading: false });
  } …

我添加了react-navigation和react-native-gesture-handler.当我使用react-native run-android运行项目时,我收到以下错误:

• 什么地方出了错:

Could not compile settings file 'C:\Users\pc\Desktop\GSTCalc\android\settings.gradle'.
> startup failed:
settings file 'C:\Users\pc\Desktop\Project\android\settings.gradle': 3: unexpected char: '\' @ line 3, column 133.

Following is the content of my settings.gradle file:

rootProject.name = 'GSTCalc'
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')
include ':app'

我试图从我的项目文件夹中删除node-modules文件夹.并运行npm install.但一切都是徒劳的.我还该怎么办？提前致谢.