현재 React Native를 (를) 배우고 있습니다. 데이터를 가져올 때 Loading 텍스트를 표시해야하는보기를 작성했으며 앱에서 데이터를 수신하면 데이터를 표시해야합니다. 앱이 백엔드 서버를 치고 있으며 URL을 받고 있습니다 (앱에서 console.error를 시도했으며 올바른 데이터 세부 정보가 표시된 화면이 팝업으로 표시됩니다).업데이트 중 상태가 업데이트되지 않음
보기가 업데이트되지 않는 것이 문제입니다. 이상한 또 다른 것은 컨테이너에 설정된 경계선이 조건부 뷰에 표시되지만 텍스트 또는 데이터는 제외하고 표시되지 않는다는 것입니다. 올바른 데이터를 넣을지라도. 조건의 유효성을 올바르게 검사하는지 여부는 확실하지 않습니다.
나는 스타일 시트에 articleContainer에 설정되어 언급하고 조건 함께 용기에 부착되어 경계 this.state.hasResult
내가하지만 국경 사라짐 분명히 그 뷰에서 스타일을 제거하는 경우 뷰 내부에 정적 텍스트를 넣어도 디스플레이되지 않습니다 (나는 json을 잘못 파싱했습니다.) 약간 혼란 스럽습니다.
var constants = require("../constants")
var React = require('react');
var ReactNative = require('react-native');
var t = require('tcomb-form-native');
var authenticate = require("../services/authenticate")
var {
AppRegistry,
AsyncStorage,
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
ListView,
Image,
} = ReactNative;
const options = {}
class RecipePage extends React.Component{
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.id !== r2.id});
var getData = require("../services/get_featured");
var par = this;
var recipeId = props.recipeId;
this.state ={
hasResult: false,
noResult: false,
result: null,
isLoading: true,
}
getData(recipeId).then(function(data){
par.setState(
{
result:data,
hasResult:true,
noResult:false,
isLoading:false
}
)
}).catch(function(error) {
console.error(error);
});
}
goBack(){
this.props.navigator.pop();
}
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<Text style={styles.title}>Recipe</Text>
<TouchableHighlight onPress={this.goBack.bind(this)}>
<Image style={styles.back}
source={require("../static/images/back.png")}
/>
</TouchableHighlight>
</View>
{
this.state.hasResult &&
<View style={styles.article_container} >
<Text style={styles.article_title} >{this.state.result.id}</Text>
<Image style={styles.article_img}
source={{uri: this.state.result.image_link}}
/>
</View>
}
{
this.state.isLoading &&
<View style={styles.article_container} >
<Text style={styles.article_title} >Loading</Text>
</View>
}
</View>
);
}
}
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 25,
padding: 20,
backgroundColor: '#ffffff',
},
title: {
fontSize: 30,
alignSelf: 'center',
marginBottom: 30
},
article_container: {
justifyContent: 'center',
marginTop: 5,
padding: 20,
backgroundColor: '#ffffff',
borderBottomColor: '#555555',
borderBottomWidth: 1,
flex:1
},
article_title: {
fontSize: 25,
alignSelf: 'center',
marginBottom: 3,
flex:2
},
article_img: {
width:200,
height:200,
alignSelf: 'center',
flex:1
},
article_description :{
fontSize:15,
flex:3
},
back:{
backgroundColor:'#ffffff',
width:20,
height:20
}
});
module.exports = RecipePage;
당신은 내가이 질문에 관련되지 않은 코드를 향상시킬 수 있다고 생각한다면, 논평 날 : 계몽 주시기
편집 :
내가 조금 주위에 재생 더 발견 나는대로 첨부 된 스타일을 변경하는 경우 : -
에서<View style={styles.row} >
<Text style={styles.title} >{this.state.result.title}</Text>
<Image
source={{uri: this.state.result.image_link}}
/>
</View>
<View style={styles.article_container} >
<Text style={styles.article_title} >{this.state.result.id}</Text>
<Image style={styles.article_img}
source={{uri: this.state.result.image_link}}
/>
</View>
변경 한 후에도 제목을 볼 수 있지만 이미지는 여전히 표시되지 않습니다. 왜 다른 스타일을 보여주지 않았는지 확실하지 않습니다. 스타일 중 하나에 -> article_title 또는 article_container가 첨부되어 있어도 표시되지 않습니다.
편집 2 :
내가 수동으로, 그것은 내가 목록보기 비슷한 스타일을 사용하는 부모로부터 해당 페이지로 이동하고
<Text style={{fontSize: 25,alignSelf: 'center',marginBottom: 3,flex:2}} >{this.state.result.title}</Text>
처럼 표시되지 않는 스타일을 적용하더라도 및 그것은 거기에 완벽하게 보이고 있습니다.