setNativeProps Verändern Sie den Wert für die Text-Komponente Reagieren Nativen Direkte Manipulation

Möchte ich direkt den Wert aktualisieren einer Komponente aufgrund von performance-Gründen.

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

Dies ist die Methode, die ich verwenden, um die Aktualisierung der text-Komponente. Ich weiß nicht, ob ich die richtigen attribute/wie, um herauszufinden, welche attribute gesetzt werden:

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

Im wesentlichen versucht den gleichen Ansatz Folgen, der von diesem Beispiel:
https://rnplay.org/plays/pOI9bA

Bearbeiten:
Wenn ich versuche, die explizit zuweisen, wird der aktualisierte Wert: 

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

( Ich weiß, das dies der richtige Weg, Dinge zu tun, die in RN ). Ich bekomme die Fehlermeldung "Cannot assign auf" nur Lesen " - Eigenschaft 'Kinder' von Objekt'#'"

Also vielleicht das ist, warum es kann nicht aktualisiert werden, die in RN für einige Grund ?

  • Verwenden Sie eine TextInput statt und stellen Sie den Wert mit this._text.setNativeProps( { text: 'Hi There!' } ).
InformationsquelleAutor Shivam Sinha | 2016-05-04
  1. 9

    Anstatt zu versuchen zu ändern, den Inhalt <Text> Komponente. Ich habe gerade ersetzt, mit <TextInput editable={false} defaultValue={this.state.initValue} /> gehalten und der rest des Codes die gleichen. Wenn jemand weiß, wie Sie den Wert ändern können, der <Text> mit setNativeProps ODER eine andere Methode der direkten Manipulationen. Post die Antwort und schlecht Lesen und akzeptieren.

    • Sie können nicht direkt bearbeitet werden, eine <Text> weil es verwendet eine NSTextStorage und nicht ein NSString Eigenschaft. Check this out: github.com/facebook/react-native/blob/master/Libraries/Text/..., Wenn es eine Möglichkeit zur Konvertierung einer Zeichenfolge Wert auf eine NSTextStorage Wert, dann könnten wir auch manipulieren das Textfeld, aber meines Wissens können wir nicht.
    InformationsquelleAutor Shivam Sinha
  2. 2

    Den text-tag muss nicht ein text prop, so 

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

    nicht funktioniert.

    Aber den text-tag hat eine style prop, so 

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

    funktioniert.

    InformationsquelleAutor 李振纲
  3. 0

    Code-snippet, um einen reset der Wert in einem Textfeld zu leeren. 

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

    überprüfen Sie dieses Beispiel hier

    InformationsquelleAutor Kailash Uniyal
  4. -1

    Als setNativeProps nicht die Lösung der Zweck, zu ändern, den Inhalt <Text /> habe ich folgenden Ansatz und arbeitet gut. Erstellen Sie Einfach Reagieren Komponente wie unten...

    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>
}
});
    • Meinst du var Text oder return <Txt?
    • Ich denke, das ist genau das, was wurde versucht zu vermeiden, in die Frage.
    InformationsquelleAutor Durga
Schreibe einen Kommentar