Adjacent JSX elements must be wrapped in an enclosing tag,添加了标签也会报错
来源:6-2 视频列表页挖坑开发(2)
踏雪彳亍
2016-10-23
写回答
3回答
-
眼睛都看瞎了
<View style={styles.handleBox>
这里少了一个 }
应该是 <View style={styles.handleBox}>
122016-10-25 -
Scott
2016-10-24
我也一下子没看出来哪里有错,你用排除法试试,就是删掉 70 行这一行代码看看包不报错,如果还报错,就继续删代码,如果不报错,就把其他代码都陆续删掉,保留这一行,看看到底是这一行出了问题,还是外层包裹的代码有问题
00 -
踏雪彳亍
提问者
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
00
相似问题