Adjacent JSX elements must be wrapped in an enclosing tag,添加了标签也会报错

来源:6-2 视频列表页挖坑开发(2)

踏雪彳亍

2016-10-23

580ccfdb0001e84b05000445.jpg

580ccfdb00014e0305000890.jpg


写回答

3回答

Scott

2016-10-25

眼睛都看瞎了


<View style={styles.handleBox>


这里少了一个 }


应该是 <View style={styles.handleBox}>

1
2
踏雪彳亍
非常感谢!谢谢老师的耐心指导,我也会严格检讨自己的粗心
2016-10-25
共2条回复

Scott

2016-10-24

我也一下子没看出来哪里有错,你用排除法试试,就是删掉 70 行这一行代码看看包不报错,如果还报错,就继续删代码,如果不报错,就把其他代码都陆续删掉,保留这一行,看看到底是这一行出了问题,还是外层包裹的代码有问题

0
0

踏雪彳亍

提问者

2016-10-24

首先谢谢老师的关注,我发布求助信息之前已经试过这种排除法了,还是不行,我在报错的70行加入一个<View>包住它也是不行,我按照老师的做法,到课程5-1的第一节为止都是可以正常运行的,我把我的代码贴下,麻烦老师有空帮我看看是不是代码有问题:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
// ES5
// var React = require('react-native')
// var Component = React.Component //说明Component是在React里面的
// var AppRegistry = React.AppRegistry
// var StyleSheet = React.StyleSheet
// var Text = React.Text
// var View = React.View
// var TabBarIOS = React.TabBarIOS
var React = require('react');
var ReactNative = require('react-native');
var Icon = require('react-native-vector-icons/Ionicons');
var {
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight,
  Image,
  Dimensions,
} = ReactNative;
var width = Dimensions.get('window').width;
var List = React.createClass({
getInitialState: function() {
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    // this.state = {
    //   dataSource: ds.cloneWithRows([]),
    // };
    return {
    dataSource: ds.cloneWithRows([ {
        "_id":"610000199704233334","thumb":"http://dummyimage.com/1200x600/56a0a9)","video":"http://www.imooc.com/video/13004"
    }
    ,
    {
        "_id":"440000200801093859","thumb":"http://dummyimage.com/1200x600/0949c5)","video":"http://www.imooc.com/video/13004"
    }]),
    }
},
 renderRow: function(row) {
  return (
    <TouchableHighlight>
     <View style={styles.item}>
        <Text style={styles.title}>{row._id}</Text>
        <Image
          source={{uri: row.thumb}}
          style={styles.thumb}
        >
          <Icon
            name='ios-play'
            size={28}
            style={styles.play} />
        </Image>
        <View style={styles.itemFooter}>
            <View style={styles.handleBox>
              <Icon
              name='ios-heart-outline'
              size={28}
              style={styles.up} />
              <Text style={styles.handleText}>喜欢</Text>
            </View>
          
            <View style={styles.handleBox>
              <Icon
              name='ios-chatboxes-outline'
              size={28}
              style={styles.commentIcon} />
              <Text style={styles.handleText}>评论</Text>
            </View>
        </View>
     </View>
    </TouchableHighlight>
  );
 },
 render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
        <Text style={styles.headerTitle}>列表页面</Text>
        </View>
        <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        enableEmptySections={true}
         />
      </View>
    )
  }
})
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  header: {
  paddingTop: 25,
  paddingBottom: 12,
  backgroundColor: '#ee735c'
  },
  headerTitle: {
  color: '#fff',
  fontSize: 16,
  textAlign: 'center',
  fontWeight: '600'
  },
  item: {
  width: width,
  marginBottom: 10,
  backgroundColor: '#fff',
  },
  thumb: {
  width: width,
  height: width * 0.5,
  resizeMode: 'cover'
  },
  title: {
  padding: 10,
  fontSize: 18,
  color: '#333'
  },
  itemFooter: {
  flexDirection: 'row',//并排
  justifyContent: 'space-between',//两端对齐
  backgroundColor: '#eee'
  },
  handleBox: {
  padding: 10,
  flexDirection: 'row',
  width: width / 2 - 0.5,
  justifyContent: 'center',//
  backgroundColor: '#fff'
  },
  play: {
  position: 'absolute',
  bottom: 14,
  right: 14,
  width: 46,
  height: 46,
  paddingTop: 9,
  paddingLeft: 18,
  backgroundColor: 'transparent',
  borderColor: '#fff',
  borderWidth: 1,
  borderRadius: 23,
  color: '#ed7b66'
  },
  handleText: {
  paddingLeft: 12,
  fontSize: 18,
  color: '#333'
  },
  up: {
  fontSize: 22,
  color: '#333'
  },
  commentIcon: {
  fontSize: 22,
  color: '#333'
  }
})
module.exports = List


0
0

贯穿全栈React Native开发App

全面掌握React Native技术,不止步前端开发,让你移动领域大放光彩

946 学习 · 385 问题

查看课程