React-Native中的文本组件值不会更改

时间:2016-09-26 21:35:21

标签: reactjs react-native

我有一个组件,其中Text组件的值没有被更新,即使Render()函数中显示了更新。

组件嵌套如下:

render() {
    const myValue = this.state.myValue
    console.warn('Value: ' + myValue)
    return <View>
        ...
        <View>
             <Image>
                 <Text>{myValue}</Text>
             </Image>
        </View>
        ....
    </View>
}

问题是console.warn显示值正在变化并且正在设置常量值。但是<Text>组件本身没有更新。 <Text>组件包含在<Image>组件中,因为它是此部分的背景图像。在我的情况下,Render()方法每秒调用四次,因为我们有一个不断接收更新的计时器栏。

为什么<Text>组件无法按预期更新?

注意:如果我将<Text>组件更改为<Image><View>组件会更新,但此部分需要背景图像。

2 个答案:

答案 0 :(得分:0)

使用const时,它向React说明指针没有改变,渲染将无效。

尝试将其直接连接到状态,如下所示:

render() {
    console.warn('Value: ' + this.state.myValue)
    return <View>
        ...
        <View>
             <Image>
                 <Text>{this.state.myValue}</Text>
             </Image>
        </View>
        ....
    </View>
}

答案 1 :(得分:0)

我认为造成此问题的原因是,图像组件被缓存,并且对this.setState({myValue: 'text'})的调用错过了刷新图像和所有包含的组件(在本例中为Text组件)的操作。在致电this.forceUpdate()之后致电setState()对我有用。

此外,不确定您使用的是哪个版本的React,但是您还可以看到此答案here,有关将其他组件放置在react-native中的ImageComponent中。