小编Max*_*hke的帖子

我已经开始了一个新的React Native项目,并且我一直收到以下警告:

远程调试器位于后台选项卡中,可能会导致应用程序执行缓慢.通过前景化选项卡(或在单独的窗口中打开它)来解决此问题.

这有点烦人所以我想知道如何摆脱它？我在Chrome中运行调试器,我把它移到一个单独的窗口,但它没有帮助.

我有以下 React 组件，可从对象数组生成 HTML 表。应该显示的列是通过tableColumns属性定义的。

当循环items并显示正确的列时，我必须使用对象 ( ) 中的key属性，但打字稿生成以下错误：tableColumn{item[column.key]}

元素隐式具有 'any' 类型，因为类型 'string' 的表达式不能用于索引类型 '{}'。在类型“{}”上找不到带有“字符串”类型参数的索引签名。

我能做些什么来解决这个问题？我迷路了

我如何调用组件：

<TableGridView
  items={[
    {
      id: 1,
      name: 'John Doe',
      email: 'john@doe.de'
    },
    {
      id: 2,
      name: 'Lorem ipsum',
      email: 'lorem@ipsum.com',
    }
  ]}
  tableColumns={[
    {
      key: 'id',
      label: 'ID',
    },
    {
      key: 'name',
      label: 'Name',
    }
  ]}
/>

我的组件：

export type TableColumn = {
  key: string,
  label: string,
};

export type TableGridViewProps = {
  items: object[],
  tableColumns: …

我正在使用React Natives KeyboardAvoidingView设置View键盘显示时的高度.但是当我关闭应用程序中的键盘时,View的高度不会更改回原始值.

<KeyboardAvoidingView behavior="height" style={styles.step}>
  <View style={styles.stepHeader}>
    // my content
  </View>
</KeyboardAvoidingView>

在打开和关闭键盘之前,带有红色轮廓的视图占据了整个空间.

我在Android上对我的API进行获取请求时遇到了一个奇怪的问题(使用React Apollo).在dev构建以及发布构建中,fetch不起作用.一旦启动React Native Debugger并启用Enable Network Inspect,请求就会起作用.

我不知道如何调试请求,因为未启用Network Inspect时调试器中未显示这些请求.

我有什么想法可以找到错误或者是否有人遇到过同样的问题？

我已经使用 React Native 构建了一个应用程序，该应用程序在调试模式下完美运行，但是在运行发布版本时，它在导航到场景时失败。

Xcode 控制台显示一个神秘的错误消息（可能是因为缩小）。我不知道如何从这个错误中获得更多？有没有办法通过不同的捆绑或寻找其他地方来获得更多信息？

[tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating 'e.default')

This error is located at:
in r
in t
in RCTView
in RCTView
in t
in t
in RCTView
in n
in t
in n
in u
in e
in t
in t
in n
in e
in RCTView
in RCTView
in n
in t
in inject-t-with-app-user
in RCTView
in t
in RCTView
in t
in RCTView
in RCTView
in n 

编辑： React Native 中似乎存在一个错误。我在 GitHub 上创建了一个错误。对于每个寻求解决方案的人：目前似乎没有。

https://github.com/facebook/react-native/issues/23988

——————

我正在使用半透明的标题，这就是为什么我给了ScrollViewapaddingTop来抵消内容。当我下拉刷新时，微调器仍在顶部。

我试图用来contentInset={{ top: 80 }}抵消一切，但在 iOS 上存在一个问题，它有时无法正确拾取并设置为0.

有没有其他方法可以让 RefreshControl 开始降低？

这是我的组件：

  <Animated.ScrollView
    scrollEventThrottle={1}
    onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
      { useNativeDriver: true },
    )}
    contentInset={{ top: headerHeight() + 10 }}
  >

我有一个小的 React 组件，其中子组件是一个函数。我似乎不知道如何children在 TypeScript 中定义 prop。

class ClickOutside extends React.PureComponent<Props, {}> {
  render() {
    const { children } = this.props;

    return children({ setElementRef: this.setElementRef });
  }
}

我这样称呼它：

<ClickOutside onOutsideClick={() => this.setState({ isOpen: false })}>
  {({ setElementRef }) => (
    <div ref={setElementRef}>
      {trigger}
      {children}
    </div>
  )}
</ClickOutside>

这就是我试图定义的道具，但它根本不起作用。我尝试过其他几件事但都失败了，我有点迷失在这里。

type Props = {
  children: ({ setElementRef: (el: HTMLElement) => any }) => React.ReactNode,
  onOutsideClick: Function,
}

编辑：

这产生';' expected.于=>

当我这样更改类型定义时：

type Props = {
  children: ({ …

我有以下翻译：

{count, number} {count, plural, one {Kundenbewertung} other {Kundenbewertungen}}

在 Chrome 中它显示23 Kundenbewertungen得很好，但在 Safari 中它显示翻译字符串并抛出错误

格式化消息时出错：“pdp:product-title: ratings”，区域设置：“de”

无法格式化消息：“pdp：产品标题：评级”，使用消息源作为后备。

在我的 React 组件中，代码如下：

<FormattedMessage
  id="pdp:product-title:ratings"
  values={{ count: product.metadata.rating.count }}
/>

我完全迷失了，因为它在 Chrome 中按预期工作。我使用的语法正确吗？

我正在监听该mousemove事件，以便根据鼠标位置为按钮提供良好的效果。然而，在移动设备上，如果我触摸按钮，事件也会被触发，使按钮跳转到该位置。我宁愿让按钮在通过触摸完成事件时忽略该事件，但我很难理解如何实现这一点？

// The function is just a helper of mine (it ads addEventListener to the matched events
createEventListener('.hoverable', 'mousemove', function(e) {
  // stripped out some calculations for simplicity reasons
  const deltaX = 50;
  const deltaY = 50;

  const transformString = `translate3d(${deltaX}px, ${deltaY}px, 0)`;

  this.style.mozTransform = transformString;
  this.style.webkitTransform = transformString;
  this.style.transform = transformString;
});

我有一个React Native项目仍在运行0.40.0，当我尝试在XCode for Simulator中构建时：

Ordered comparison between pointer and zero ('NSNumber *' and 'int')

这是文件中RCTJavaScriptLoader.mm的React.xcodeproj> React>Base

因为此错误发生在React Native文件中，所以我不知道它试图告诉我什么。代码块是：

- (NSString *)description
{
  NSMutableString *desc = [NSMutableString new];
  [desc appendString:_status ?: @"Loading"];

  if (_total > 0) { // ERROR HAPPENS HERE
    [desc appendFormat:@" %ld%% (%@/%@)", (long)(100 * [_done integerValue] / [_total integerValue]), _done, _total];
  }
  [desc appendString:@"\u2026"];
  return desc;
}

我试图清理项目，甚至删除了ios文件夹并通过使用react-native upgrade对其进行了重新生成，但在链接所有内容后它无济于事。

我有以下组件的查询和变异,但我的组件没有收到数据和变异道具.

我在代码中做错了什么或丢失了什么？查询确实执行了,它只是没有传递下来.this.props.mutate以及this.props.data未定义.

class ResetConfirm extends React.Component {
  static propTypes = {
    intl: intlShape.isRequired,
    token: React.PropTypes.string,
    data: React.PropTypes.shape({
      loading: React.PropTypes.bool.isRequired,
      checkToken: React.PropTypes.array,
    }).isRequired,
    mutate: React.PropTypes.func.isRequired,
  }

  submitForm = (model) => {
    this.setState({
      loading: true,
    });

    this.props.mutate({ variables: { password: model.password, token: this.props.token } })
      .then(({ data }) => {
        // redirect
      }).catch((error) => {
        console.log('there was an error sending the query', error);
      });
  }
  render() {
       //render jsx
  }
}

const CheckTokenQuery = gql`
  query CheckToken($token: String!) {
    checkToken(token: $token) { …

我在 React Native 中有一个基本的 MobX 设置，但是在 observable 更新后我的组件没有重新渲染，我似乎无法弄清楚原因。

反应原生0.56.1 ; 反应16.4.1 ; mobx 4.5.0 ; mobx 反应5.2.8

店铺

class AppStore {
  drawer = false;
  toggleDrawer = () => {
    this.drawer = !this.drawer;
  }
}
decorate(AppStore, {
  drawer: observable,
  toggleDrawer: action
});

const app = new AppStore();
export default app;

成分

class _AppLayout extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      drawerAnimation: new Animated.Value(0)
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    console.log('will not get called');
    if (this.props.app.drawer !== nextProps.app.drawer) { …

我有以下两个Javascript数组:

const array1 = [{ id: 1}, { id: 2 }, { id: 3 }, { id: 4}];
const array2 = [{ id: 1}, { id: 3 }];

我现在想要一个array3只包含尚未包含的对象的新数组array2,所以:

const array3 = [{ id: 2}, { id: 4 }];

我尝试了以下但它返回所有对象,当我将条件更改为===它时返回对象array2.

const array3 = array1.filter(entry1 => {
  return array2.some(entry2 => entry1.id !== entry2.id);
});

任何的想法？ES6欢迎