Question

我有新的反应和反应本地（以及几乎所有的东西......），我试图关注facebook's tutorial状态和道具。我正在玩代码，我遇到了一些问题。

我已将Apps.js修改为如下所示：

import React, { Component } from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f1f',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text1 : this.props.text2;
    let pic = this.state.showText ? {uri: this.props.url1} : {uri: this.props.url2}
    return (
      <View>
        <Image source={pic} style={{width: 193, height: 110}}/>
        <Text>{display}</Text>
      </View>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Blink text1='test1' />
        <Blink text2='test2' />
        <Blink url1='https://www.gizbot.com/img/2015/08/10-1439192289-lolemoji.jpg' />
        <Blink url2='http://s3.india.com/wp-content/uploads/2015/08/haha-nelson-simpsons.jpg' />
      </View>
    );
  }
}

它不是像教程中那样闪烁三行文本，而是假设使用我自己的两行文本（text1和text2来闪烁两个不同的图像StyleSheet。我遇到的问题是它们没有正确对齐。无论我尝试什么，我都无法将它们集中到中心。

它显示/闪烁的两个不同图像是here和here

我希望它们看起来像here和here

所以我的问题是：

1）我定义style的位置是否重要？例如在我的代码中，我已将它们包含在第二个render内，但我注意到如果我将它们放在第一个render内，则会出现不同的结果。有什么区别？

2）我在这里错误地使用props吗？我应该怎么做才能将两个图像和文本定义为props的一部分？

3）setInterval和previousState原生反应库吗？他们是如何被召唤的？即什么触发setInterval来改变showText的价值？

4）何时被调用setState？

Answer 1

我重写了你的代码，我认为它现在正如你所期望的那样。

你的问题：

1＆amp; 2：您使用style和props的方式有误，请参阅下面的代码。

3：setInterval是原生反应库，您可以在https://facebook.github.io/react-native/docs/timers.html

中找到用法

4：您的代码调用setState，请查看文档https://facebook.github.io/react-native/docs/state.html

import React, { Component } from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f1f',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

class Blink extends Component {
  render() {
    const { text, url } = this.props;
    console.log('url' + url);
    return (
      <View>
        <Image source={{uri:url, cache: 'force-cache'}} style={{width: 193, height: 110}}/>
        <Text>{text}</Text>
      </View>
    );
  }
}

export default class BlinkApp extends Component {
  constructor(props) {
    super(props);


    this.state = {
      showFirst: true,
    };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        showFirst: !this.state.showFirst
      });
    }, 1000);
  }

  render() {
    const showFirst = this.state.showFirst;
    return (
      <View style={styles.container}>
        {showFirst && <Blink url="https://www.gizbot.com/img/2015/08/10-1439192289-lolemoji.jpg" text='test1' />}
        {!showFirst && <Blink url="http://s3.india.com/wp-content/uploads/2015/08/haha-nelson-simpsons.jpg" text='test2' />}
      </View>
    );
  }
}

很少有新手反应原生问题

1 个答案: