Question

我目前正在学习React Native。我已经构建了一个视图，该视图应该在提取数据时显示文本加载，并且应该在应用程序收到数据后显示数据。该应用程序正在访问后端服务器并获取URL（在应用程序上尝试了console.error，它会弹出显示正确数据详细信息的ared屏幕）。

问题是视图没有更新。另一件奇怪的事情是条件视图显示了为容器设置的边框，但它不显示除此之外的任何文本或数据。即使我把正确的数据。不确定条件是否正确验证。

我提到的边框在样式表的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>

我可以在进行此更改后查看标题，但图像仍未显示。而且我不确定为什么它没有显示其他风格。即使附加了其中一种风格 - ＆gt; article_title或article_container，它没有显示。

编辑2：

即使手动应用样式，它也不会显示为

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

我从父母导航到此页面，该父母对列表视图使用类似的样式，并且它完美地显示在那里。

Answer 1

问题似乎是我在样式中使用 flex 属性而不使用ScrollView或ListView。我会对此进行更多研究并更新答案。

更新状态不更新视图

1 个答案: