Question

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

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

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

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

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

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

import org.gradle.internal.os.OperatingSystem;
apply plugin: 'java'

sourceCompatibility = 1.8
targetCompatibility = 1.8

sourceSets {
    main {
        java {                  
            srcDirs = ["abc/def/"]
            include('include/Constants.java')                                   
            }
        }
}

task initial(type: Exec) {
    doFirst {
    println 'Started compiling constants'
  }
  if(OperatingSystem.current().isWindows()) { 
    println 'Compiling on windows'
    //Run some bash script here
  }
  else {
    print 'Compiling on unix'
    //Run some shell script here
  }
  doLast {
    println 'Finish compiling constants'
  }
}

jar {
    baseName = 'output' 
}

dependencies {
    compile files('../lib/log4j/log4j.jar')     
    compile files('../lib/findbugs/findbugs.jar')   
    compile files('../lib/guava/guava-19.0.jar')    
}

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

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

Answer 1

而不是尝试更改<Text>组件的内容。我刚刚替换为<TextInput editable={false} defaultValue={this.state.initValue} />并保持其余代码相同。如果有人知道如何使用<Text>或其他直接操作方法更改setNativeProps的值。发布答案，审查并接受。

Answer 2

text标签没有text道具，所以

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

不起作用。

但是文本标签有一个style道具，所以

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

作品。

Answer 3

代码段，用于将文本字段中的值重置为空白。

import React from 'react';
import { TextInput, Text, TouchableOpacity, View } from 'react-native';

export default class App extends React.Component {
  clearText = () => {
    this._textInput.setNativeProps({text: ''});
  }

  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <TextInput
          ref={component => this._textInput = component}
          style={{height: 50, width: 200, marginHorizontal: 20, borderWidth: 1, borderColor: '#ccc'}}
        />
        <TouchableOpacity onPress={this.clearText}>
          <Text>Clear text</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

check this example here

Answer 4

由于setNativeProps没有解决改变<Text />内容的目的，我使用了以下方法并且运行良好。创建简单的React组件，如下所示......

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>
}
});

setNativeProps文本组件的更改值React Native Direct Manipulation

4 个答案: