現在、React Nativeを学習中です。 私は、データが取得されているときにテキストを表示するビューを構築し、データがアプリケーションによって受信されたらデータを表示する必要があります。 アプリがバックエンドサーバーに当たってURLを取得しています（アプリでconsole.errorを試しましたが、正しいデータの詳細が表示された画面がポップアップ表示されます）。状態を更新していない状態を更新しています
問題はビューが更新されていないことです。変わったもう一つのことは、コンテナに設定されている境界線が条件付きビューに表示されていることですが、それ以外のテキストやデータは表示されません。正しいデータを入れても。条件が正しく検証されているかどうかは不明です。
私はスタイルシートで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>
変更後にタイトルを表示できますが、画像は表示されません。なぜ私は他のスタイルのために表示されていないのか分かりません。 スタイルの1つが - > article_titleまたはarticle_containerに添付されていても、表示されません。
編集2：
私は手動でスタイルを適用したとしても、それは
<Text style={{fontSize: 25,alignSelf: 'center',marginBottom: 3,flex:2}} >{this.state.result.title}</Text>
のように表示されていない私は、リストビューのために同様のスタイルを使用して親からこのページに移動していますし、それは完全にそこに示しています。