setNativeProps 更改文本组件的值 React Native 直接操作

Question

由于性能原因，我想直接更新某个组件的值。

render(){

<View>

<Text style={styles.welcome} ref={component => this._text = component}>
  Some Text
</Text>

<TouchableHighlight underlayColor='#88D4F5'
              style={styles.button}>
          <View>    
            <Text style={styles.buttonText}
                 onPress={this.useNativePropsToUpdate.bind(this)}>
              Iam the Child
            </Text>
          </View>  
</TouchableHighlight>

</View>
}

这是我用来更新文本组件的方法。我不知道我是否设置了正确的属性/如何确定要设置哪个属性：

  useNativePropsToUpdate(){
    this._text.setNativeProps({text: 'Updated using native props'});
  }

基本上尝试遵循此示例中的相同方法： https://rnplay.org/plays/pOI9bA

编辑： 当我尝试显式分配更新值时：

this._text.props.children = "updated"; 

（我知道这是 RN 中做事的正确方法）。我收到错误“无法分配给对象 '#' 的只读属性 'children'”

所以也许这就是为什么它由于某种原因无法在 RN 中更新？

Answer 1

而不是尝试更改

<Text>

组件的内容。我只是替换为

<TextInput editable={false} defaultValue={this.state.initValue} />

并保持其余代码相同。如果有人知道如何使用

<Text>

或其他直接操作方法更改

setNativeProps

的值。发布答案并审核并接受。

Answer 2

我们不能在

setNativeProps

组件上使用

Text

，相反，我们可以通过使用 TextInput 代替 Text 来实现相同的结果。通过将

pointerEvent='none'

放在封闭的

View

上，我们将禁用点击，因此我们无法编辑

TextInput

（您也可以在

editable={false}

中设置

TextInput

来禁用编辑）

演示 - 计时器（每 1 秒计数一次变化）

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

class Demo extends Component {
  componentDidMount() {
    let count = 0;
    setInterval(() => {
      count++;
      if (this.ref) {
        this.ref.setNativeProps({text: count.toString()});
      }
    }, 1000);
  }

  render() {
    return (
      <View style={styles.container} pointerEvents={'none'}>
        <TextInput
          ref={ref => (this.ref = ref)}
          defaultValue={'0'}
          // editable={false}
          style={styles.textInput}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 0.7,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textInput: {
    fontSize: 60,
    width: '50%',
    borderColor: 'grey',
    borderWidth: 1,
    aspectRatio: 1,
    borderRadius: 8,
    padding: 5,
    textAlign: 'center',
  },
});

export default Demo;

文本标签没有

text

Answer 3

this._text.setNativeProps({ text: 'XXXX' })

不起作用。

但是文本标签有一个 

style

属性，所以

this._text.setNativeProps({ style: { color: 'red' } })

有效。

您只能更改 Text 的一些有限属性，因此最好使用 TextInput

Answer 4

您可以看到只有文本样式属性发生了变化，而文本并未发生变化。但是 textinput 中的样式和文本都发生了变化

import React, { useRef } from 'react';
import { View, Text, Button, StyleSheet, TextInput } from 'react-native';

const TextComponent = () => {
  const textRef = useRef(null);
  const textInputRef = useRef(null);

  const changeText = () => {
    if (textRef.current) {
      textRef.current.setNativeProps({
        style: { color: 'green', fontSize: 24 },
        text: 'Text has been changed!',
      });
    }

    if (textInputRef.current) {
      textInputRef.current.setNativeProps({
        style: { color: 'green', fontSize: 24 },
        text: 'Text has been changed!',
      });
    }
  };

  return (
    <View style={styles.container}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
        }}>
        <Text
          style={{
            fontWeight: 'bold',
            color: 'red',
            paddingHorizontal: 6,
          }}>
          Text component
        </Text>
        <Text ref={textRef} style={styles.text}>
          Initial Text
        </Text>
      </View>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
        }}>
        <Text
          style={{
            fontWeight: 'bold',
            color: 'red',
            paddingHorizontal: 6,
          }}>
          TextInput component
        </Text>
        <TextInput
          defaultValue={'Initial Text'}
          ref={textInputRef}
          style={styles.text}
        />
      </View>
      <Button title="Change Text" onPress={changeText} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: 'center',
  },
});

export default TextComponent;

由于 setNativeProps 没有解决改变 

<Text />

Answer 5

var Txt = React.createClass({
getInitialState:function(){
    return {text:this.props.children};
},setText:function(txt){
    this.setState({text:txt});
}
,
render:function(){
    return <Text {...this.props}>{this.state.text}</Text>
}
});