0
我目前正在學習React Native。 我已經構建了一個視圖，該視圖在數據被提取時應該顯示文本加載，並且應用程序收到數據後應該顯示數據。 該應用程序正在擊中後端服務器，並獲取URL（在應用程序上嘗試console.error，它彈出與ared屏幕顯示正確的數據詳細信息）。更新狀態不更新視圖
問題是視圖沒有被更新。另一件奇怪的事情是，條件視圖顯示了爲容器設置的邊框，但除此之外，它不顯示任何文本或數據。即使我把正確的數據。不確定條件是否被正確驗證。
我提到articleContainer設置在樣式表，並附有與該狀態的容器邊框this.state.hasResult
如果我從該視圖邊界dissappears明顯，但刪除樣式即使在視圖內部放置一個靜態文本也沒有被顯示（在我解析了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>
我瀏覽這個網頁從使用類似的樣式列表視圖父母，它在那裏完美展現。