Обновление Статус не обновляющий вид

В настоящее время я изучаю React Native. Я построил представление, которое должно отображать текст Загрузка, когда данные извлекаются и должны отображать данные после получения данных приложением. Приложение ударяет по серверу и получает URL-адрес (попробовал console.error на приложении, и он всплывает с помощью экрана ISD, отображающего правильные данные).Обновление Статус не обновляющий вид

Проблема заключается не в обновлении. Еще одна вещь, которая является странной, заключается в том, что условное представление показывает границу, которая была установлена для контейнера, но она не отображает никаких текстов или данных, кроме этого. Даже если я поставлю правильные данные. Не уверен, что условие проверено правильно или нет.

Границы я уже установлен в 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;

Если вы думаете, что я могу улучшить код не относящуюся к этому вопросу, то не стесняйтесь комментировать и просветить меня :)

Edit:

Я играл немного больше и обнаружил, что если я изменю присоединенные стили, как: -

<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, он не отображается.

Edit 2:

Даже если применить стиль вручную, он не отображается, как

<Text style={{fontSize: 25,alignSelf: 'center',marginBottom: 3,flex:2}} >{this.state.result.title}</Text>

Я навигации на эту страницу с родителем, который использует подобные стили для ListView и он показывает там отлично.

источник

2017-02-05 Shaurya Chaudhuri

Проблема заключалась в том, что я использовал свойство flex в стилях без использования ScrollView или ListView. Я бы больше исследовал это и обновил ответ.

источник

2017-02-05 15:16:31

Обновление Статус не обновляющий вид

ответ

Смежные вопросы