Javascript 无法将不具有度量值的子级添加到没有度量值函数的父级
我遇到了这个问题,也许你们中的某个人遇到了它并且知道一个解决方案?我查看了互联网并检查了我的标签,没有没有没有标签的文本Javascript 无法将不具有度量值的子级添加到没有度量值函数的父级,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我遇到了这个问题,也许你们中的某个人遇到了它并且知道一个解决方案?我查看了互联网并检查了我的标签,没有没有没有标签的文本 Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: ;]' to a 'RCTView') addChildAt ReactShadowNodeImpl.ja
Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: ;]' to a 'RCTView')
addChildAt
ReactShadowNodeImpl.java:279
addChildAt
ReactShadowNodeImpl.java:56
setChildren
UIImplementation.java:482
setChildren
UIManagerModule.java:441
invoke
Method.java
invoke
JavaMethodWrapper.java:372
invoke
JavaModuleWrapper.java:160
run
NativeRunnable.java
handleCallback
Handler.java:739
dispatchMessage
Handler.java:95
dispatchMessage
MessageQueueThreadHandler.java:29
loop
Looper.java:148
run
MessageQueueThreadImpl.java:192
run
Thread.java:818
代码:Albumlist.js
这将显示所有相册
import React, { Component } from 'react';
import { View } from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail.js';
class AlbumList extends Component {
state = {albums: [] } ;
componentWillMount(){
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState ({ albums : response.data }));
}
renderAlbums = () => {
return this.state.albums.map(albums =>
<AlbumDetail key = {albums.title} albums={albums}/>
);
}
render(){
console.log(this.state);
return (
<View>
{this.renderAlbums()}
</View>
);
}
}
export default AlbumList;
AlbumDetail.js
这是一张相册详细信息卡
import React from 'react';
import { Text, View } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
const AlbumDetail = (props) => {
return (
<Card>
<CardSection>
<View />
<View style = {styles.headerContentStyle}>
<Text>{props.albums.title}</Text>
<Text>{props.albums.artist}</Text>
</View>;
</CardSection>
</Card>
);
};
const styles= {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
}
};
export default AlbumDetail;
Card.js
这是样式的包装器
import React from 'react';
import { View, Platform } from 'react-native';
const Card = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle:{
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
...Platform.select ({
ios: {
shadowColor: '#000',
shadowOffset: {width: 0, height : 2},
shadowOpacity : 0.1,
shadowRadius: 2,
},
android: {
elevation: 1
}
}),
marginLeft: 5,
marginRight: 5,
marginTop: 10
}
};
export default Card;
CardSection.js
这是一个单卡节包装器,因此看起来更好
import React from 'react';
import { View } from 'react-native';
const CardSection = (props) => {
return (
<View style= {styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderBottomWidth:1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: 'row',
borderColor: '#ddd',
position: 'relative'
}
};
export default CardSection;
您的相册详细信息卡中有一个输入错误,这会导致;未在文本标记内呈现,这将导致显示的错误
<View style = {styles.headerContentStyle}>
<Text>{props.albums.title}</Text>
<Text>{props.albums.artist}</Text>
</View>; // <= here
真诚的感谢我的朋友!!我已经看了3个小时了,非常感谢!我一被允许就会打勾