小编Tur*_*ets的帖子

React Navigation:使用NavigationActions.reset,goBack和getStateForAction导航回Root

假设我在StackNavigator应用程序中浏览了4个屏幕,现在我想回到第一个屏幕.似乎有三种不同的方法可以做到这一点,它们会导航到我想要做的地方,但每种方式都有一个循环每个前一个屏幕的动画.

有没有干净的方式从导航SCREEN_DSCREEN_A

换句话说,在看到向后导航之前,我不希望看到SCREEN_CSCREEN_B分裂一秒钟SCREEN_ASCREEN_D

navigation.navigate(SCREEN_A);
...
navigation.navigate(SCREEN_B);
...
navigation.navigate(SCREEN_C);
...
navigation.navigate(SCREEN_D);
Run Code Online (Sandbox Code Playgroud)

三种方法:

1.

return this.props.navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [NavigationActions.navigate({ routeName: 'SCREEN_A'})]
                  }));
Run Code Online (Sandbox Code Playgroud)

2.

 const {SCREEN_B_KEY} = this.props.navigation.state.params
 this.props.navigation.goBack(SCREEN_B_KEY)
Run Code Online (Sandbox Code Playgroud)

3.

const defaultGetStateForAction = Navigation.router.getStateForAction;

Navigation.router.getStateForAction = (action, state) =>{
  if(action.type === "Navigation/BACK"){
    const routes = [
      {routeName: 'First'},
    ];
    return {
      ...state,
      routes,
      index: 0,
    };
  }
  return defaultGetStateForAction (action,state);
}
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-native react-navigation

24
推荐指数
3
解决办法
1万
查看次数

React Navigation切换背景颜色和样式StackNavigator

我对React Native很新,但我有一个简单的工作应用程序,有三个场景.我之前使用过Navigator,但感觉很迟钝,很高兴尝试使用React Navigation(如https://reactnavigation.org/).实施React Navigation后,我的背景颜色从白色变为灰色,灰色变为白色.这是一个奇怪的,不应该相关.但是我并没有改变我的风格.我只实现了新的导航并改变了颜色.当我恢复到导航器时,我的颜色会恢复.我正在使用StackNavigator.有没有其他人遇到这种奇怪的现象?

或者更好的问题是:如何在React Navigation的StackNavigator中设置标题和背景颜色?

javascript navigation navigator reactjs react-native

18
推荐指数
3
解决办法
3万
查看次数

Javascript:%s或%d代表字符串?

有人可以解释一下这里发生了什么吗?我看到了%d,%s但我没有在代码中的任何其他地方看到这些声明或写入.这在javascript中意味着什么?我假设它是一种我以前从未见过的字符串模板?

passport.deserializeUser(
  (id, done) => {
    debug('will deserialize user.id=%d', id)
    User.findById(id)
      .then(user => {
        debug('deserialize did ok user.id=%d', user.id)
        done(null, user)
      })
      .catch(err => {
        debug('deserialize did fail err=%s', err)
        done(err)
      })
  }
)
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 passport.js

16
推荐指数
2
解决办法
2万
查看次数

更好的方法在componentWillUnmount中clearTimeout

我有一个工作的加载组件,它在加载8秒后取消.这段代码有效,但感觉不对我,我想知道是否有更好的方法来做到这一点.

没有设置this.mounted我得到错误:

警告:只能更新已安装或安装的组件.这通常意味着您在已卸载的组件上调用了setState,replaceState或forceUpdate.这是一个无操作.请检查加载组件的代码.

这让我觉得计时器没有被取消所以继续this.seState.如果我clearTimeout进去,为什么会这样componentWillUnmount?有没有比使用全局更好的方法来解决这个问题this.mounted

class Loading extends Component {
  state = {
    error: false,
  };

  componentDidMount = () => {
    this.mounted = true;
    this.timer();
  };

  componentWillUnmount = () => {
    this.mounted = false;
    clearTimeout(this.timer);
  };

  timer = () =>
    setTimeout(() => {
      (this.mounted && this.setState({ error: true })) || null;
    }, 8000);

  render() {
    const { showHeader = false } = this.props;
    const { error } = this.state;
    return ( …
Run Code Online (Sandbox Code Playgroud)

javascript asynchronous settimeout reactjs react-native

12
推荐指数
2
解决办法
1万
查看次数

传播操作符将对象转换为数组

我正在尝试转换这样的数据结构:

data = { 
  0:{A:a}, 
  1:{B:b}, 
  2:{C:c}, 
}
Run Code Online (Sandbox Code Playgroud)

进入这样的结构:

[
 {0:{A:a}},
 {1:{B:b}}, 
 {2:{C:c}},
]
Run Code Online (Sandbox Code Playgroud)

像这样使用spread运算符:[...data]返回任何空数组.

我也试过了 [{...data}]

有没有办法使用扩展运算符来获得所需的结果?另外,为什么这种方法不起作用?

javascript arrays object ecmascript-6 spread-syntax

11
推荐指数
2
解决办法
6698
查看次数

重新导出模块不适用于对象传播

我有一个index.js文件,内容如下:

import aReducer from './ducks/a';
import bReducer from './ducks/b';
import * as aSelectors from './ducks/a';
import * as bSelectors from './ducks/b';

console.log(aReducer) //function i expect
console.log(aSelectors) //object with keys to selectors i expect

export { aReducer, bReducer, ...aSelectors, ...bSelectors };
Run Code Online (Sandbox Code Playgroud)

如果我console.log在这个文件中,我会看到化简器是我期望的函数,而选择器别名是带有我期望的选择器键的对象。减速器是鸭子文件的默认导出,选择器是来自同一相应文件的导出。

但是,当我尝试使用另一个文件导入此模块时,我只能导入两个减速器。这两个选择器未定义。我认为解构会将每个键添加到我的导出对象中。我究竟做错了什么?

other_file1.js

import { aReducer, bReducer } from 'my-module'; //works!
Run Code Online (Sandbox Code Playgroud)

other_file2.js

import { someSelectorThatWasInMyaSelectorsObject } from 'my-module'; //does NOT work!
Run Code Online (Sandbox Code Playgroud)

javascript import export ecmascript-6 es6-modules

6
推荐指数
1
解决办法
3156
查看次数

react-navigation导航头顶部的绝对位置

我正在制作加载屏幕,并将其设置为整个屏幕的绝对位置。但是,使用react-navigation它似乎并不覆盖标题。有没有一种方法可以将我的组件放置在导航库的标题组件之上?

使用时,react-navigation您可以为该屏幕配置标题。通常,当您导航到屏幕时,您在该屏幕中呈现的所有代码都会自动放置在nav标头下方。但是,我希望组件占据整个屏幕并覆盖标题。我想保留标题,但要用不透明性覆盖它。这可能吗?

const navigationOptions = {
  title: "Some Title",
};

    const Navigator = StackNavigator(
  {
    First: { screen: ScreenOne },
    Second: { screen: ScreenTwo },
    ...otherScreens,
  },
  {
    transitionConfig,
    navigationOptions, //this sets my header that I want to cover
  }
);
Run Code Online (Sandbox Code Playgroud)

这是我的loader.js

const backgroundStyle = {
  opacity: 0.5,
  flex: 1,
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  zIndex: 1,
};

const Loading = () =>
  <View style={backgroundStyle}> 
      <PlatformSpinner size="large" />
  </View>;
Run Code Online (Sandbox Code Playgroud)

在ScreenOne.js中

class …
Run Code Online (Sandbox Code Playgroud)

javascript absolute reactjs react-native react-navigation

6
推荐指数
1
解决办法
4227
查看次数

默认 UIFont 大小和重量,但也支持 preferredFontForTextStyle

如果我有自己的一组UIFont不同大小和重量的s,例如:

let customFont03 = UIFont.systemFont(ofSize: 40, weight: .thin)
Run Code Online (Sandbox Code Playgroud)

我如何支持,Dynamic Type同时仍将我的自定义尺寸和重量保留为默认标准并根据用户选择辅助功能尺寸的方式进行缩放?

我不确定那preferredFont(forTextStyle:)是我想要的,因为它只接受 aUIFont.TextStyle而我不想锁定customFont03为 a.body.headline等等......

accessibility ios swift dynamic-type-feature

6
推荐指数
2
解决办法
1627
查看次数

setState 回调未按预期工作

loading: true我有一个正在运行的应用程序,我只是想在我的应用程序进行提交调用时将状态设置为,以便我可以显示加载屏幕。因为我想确保在进行加载调用之前设置状态,所以我使用回调。但是,我没有看到以下代码的加载更新:

submitSecurityAnswer = () => {
    const { submit, handleError, navigate } = this.props;
    const { answer } = this.state;

    this.setState({ loading: true }, () => {
      console.log('setState', this.state)
      try {
        submit({ answer, ...this.props }).then(({ errors, status }) => {
          this.setState({ answer: '' });
          if (status && status === 200) {
            navigate();
          } else if (status === 401) {
            this.setState({ showError: true });
          } else {
            handleError(errors[0]);
          }
        });
      } catch (err) {
        console.log(err);
      }
    }); …
Run Code Online (Sandbox Code Playgroud)

javascript setstate reactjs

5
推荐指数
1
解决办法
2万
查看次数

UITableViewRowAction与UISwipeActionsConfiguration

这两个API似乎获得了相同的结果。在哪种情况下,最好使用一种而不是另一种?

override func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
  let deleteAction = UITableViewRowAction(style: .destructive,
                                          title: "Delete") { (action, indexPath) in
    print("DELETE")
  }
  return [deleteAction]
}
Run Code Online (Sandbox Code Playgroud)
override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
  let DeleteAction = UIContextualAction(style: .destructive, title: "Delete", handler: { (action, view, success) in
      print("Delete")
  })
  DeleteAction.backgroundColor = .red
  return UISwipeActionsConfiguration(actions: [DeleteAction])
}
Run Code Online (Sandbox Code Playgroud)

ios swift

5
推荐指数
1
解决办法
589
查看次数

React Native:Jest 模拟平台

在为 React Native 项目编写单元测试时,我希望能够基于不同平台测试不同的快照。

我首先尝试jest.mock模拟Platform,但似乎是异步的。当我有两个单独的文件时,这种方法确实有效,但如果可能的话,我更愿意将所有内容保留在一个文件中。

我尝试了jest.doMock因为文档中的这段代码:

使用 babel-jest 时,对模拟的调用将自动提升到代码块的顶部。如果您想明确避免此行为,请使用此方法。 https://facebook.github.io/jest/docs/en/jest-object.html#jestdomockmodulename-factory-options

但是我仍然看到不希望的结果。当我console.log在 android 测试中时,我发现这Platform.OS就是我设置的第一个值doMock

我还尝试将模拟包装在 abeforeEach中,describe因为我认为这可能有助于确定范围 http://facebook.github.io/jest/docs/en/setup-teardown.html#scoping

 describe('ios test', () => {
  it('renders ui correctly', () => {
    jest.doMock('Platform', () => {
      const Platform = require.requireActual('Platform');
      Platform.OS = 'ios';
      return Platform;
    });
    const wrapper = shallow(<SomeComponent />);
    const tree = renderer.create(wrapper).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

describe('android test', () => {
  it('renders ui correctly', () => { …
Run Code Online (Sandbox Code Playgroud)

unit-testing snapshot jestjs react-native babel-jest

3
推荐指数
1
解决办法
4215
查看次数

如何确保CircleCi忽略由CircleCi本身引起的推送?

当代码被推送到master时,CircleCi会运行,但是CircleCi会在调用的运行脚本中推送自己Version Package Bump.所以在第一次构建之后,运行第二次.但它失败了消息:

在分支主数据上您的分支是最新的'origin/master'.无需提交,工作目录清除退出代码1

如何确保CircleCi不会因自身引起的推动而再次启动?

jobs:
  build:
    docker:
      - image: circleci/node:8.10.0
    branches:
      only:
        - master
    steps:
      - add_ssh_keys
      - checkout
      - run:
          name: Keyscan DreamHost (HACK)
          command: ssh-keyscan -H HOST >> ~/.ssh/known_hosts
      - run:
          name: Install Dependencies
          command: npm install
      - run:
          name: Build App
          command: npm run build
      - run:
          name: Verion Package Bump
          command: |
            git config user.name "circleci"
            git config user.email "EMAIL"
            git add .
            git commit -m "[ci] Generated Build"
            npm version patch -m …
Run Code Online (Sandbox Code Playgroud)

git continuous-integration circleci

2
推荐指数
1
解决办法
245
查看次数

Javascript es6 - 是重新分配还是参数?

有人可以解释一下这里发生了什么吗?我知道这些是express的中间件,我正在看语法.

我理解es6语法,mustBeLoggedIn但我不确定const forbidden = message => (req, res, next) => {是做什么的.是messagereq,res,next之前的另一个参数吗?如果是这样,为什么它不在括号中?我原本以为这只是为函数分配另一个变量名.所以我可以称之为forbidden()或者message(),不是吗?但看看它是如何被使用它看起来更像是一个参数......

我注意到的另一件有趣的事情是,中间件forbidden正在get请求中被调用,并且mustBeLoggedIn只被传递而不被调用.为什么?

   const mustBeLoggedIn = (req, res, next) => {
      if (!req.user) {
        return res.status(401).send('You must be logged in')
      }
      next()
    }

    const forbidden = message => (req, res, next) => {
      res.status(403).send(message)
    }

module.exports = require('express').Router()
	.get('/', forbidden('only admins can list users'), (req, res, next) => 
		User.findAll()
		.then(users => res.json(users))
		.catch(next))
	.post('/', (req, res, next) …
Run Code Online (Sandbox Code Playgroud)

javascript node.js express ecmascript-6

1
推荐指数
1
解决办法
114
查看次数