小编Ped*_*ram的帖子

将<Image>和<TouchableHighlight>放入<View>时,"React.Children.only预计会收到一个React元素子"错误

我的React Native代码中有以下渲染方法:

render() {
    const {height, width} = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <Image 
          style={{
            height:height,
            width:width,
          }}
          source={require('image!foo')}
          resizeMode='cover' 
        />
        <TouchableHighlight style={styles.button}/>
      </View>
    );
  }
Run Code Online (Sandbox Code Playgroud)

它给了我一个

React.Children.only期望收到一个React元素子元素

错误.如果我删除该TouchableHighlight组件,它可以正常工作.另一方面,如果我删除Image组件,它仍会出现该错误.我不明白为什么会出现这个错误,并且<View>应该能够在其中包含多个组件进行渲染.
有任何想法吗?

react-native

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

如何包装一个返回多个表行的React组件,并避免"<tr>不能显示为<div>的子项"错误?

我有一个名为OrderItem的组件,它接受一个包含多个对象(至少两个)的对象,并将它们呈现为表中的多个行.表中将有多个OrderItem组件.问题是在组件的渲染功能中,我不能返回多行.我只能返回一个组件,如果我将它们包装在一个div中,它会说" <tr>不能作为一个孩子出现<div>"

代码看起来像这样(为了更容易阅读,我留下了一些东西)

Parent() {
  render() {
    return (
      <table>
        <tbody>
          {
            _.map(this.state.orderItems, (value, key) => {
              return <OrderItem value={value} myKey={key}/>
            })
          }
        </tbody>
      </table>
    )
  }
}

class OrderItem extends React.Component {
  render() {
    return (
      <div> // <-- problematic div
        <tr key={this.props.myKey}>
          <td> Table {this.props.value[0].table}</td>
          <td> Item </td>
          <td> Option </td>
        </tr>
        {this.props.value.map((item, index) => {
          if (index > 0) { // skip the first element since it's already used above
            return (
              <tr key={this.props.myKey …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

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

检测应用程序在React Native中获得焦点

我正试图检测应用程序何时获得焦点(即从另一个应用程序切换到它)以执行某项任务.有没有办法在React Native中检测到这个?

我正在做的是将文件复制到临时位置,用外部查看器打开它,然后我想在用户从应用程序切换回来时删除该文件.

react-native react-native-android

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

JavaScript/React Native代码中的import语句出错

我正在尝试在我的iOS应用程序中使用React Native中的单选按钮组合React组件,但是在尝试使用作者指定的方法导入组件时出现错误.

我首先使用以下语句将组件安装在应用程序的XCode项目/源代码的根目录中:

npm i -S react-native-radio-buttons
Run Code Online (Sandbox Code Playgroud)

一切看起来都很顺利,所以我将组件的代码合并到了JS文件中,用于使用它的屏幕,但是我在第一行(包含import语句)中收到错误.

import语句如下:

import { RadioButtons } from 'react-native-radio-buttons'
Run Code Online (Sandbox Code Playgroud)

错误是:

Uncaught SyntaxError: Unexpected reserved word
Run Code Online (Sandbox Code Playgroud)

据我所知,这应该是在ES6中做事的可接受的方式.如果有人能告诉我为什么会这样,我将不胜感激.提前致谢.

javascript ios react-native

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