setNativeProps Cambia valore per il componente del testo Reagire Manipolazione diretta nativa

Question

Desidero aggiornare direttamente il valore di un componente per motivi di prestazioni.

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

Questo è il metodo che utilizzo per aggiornare il componente di testo. Non so se sto impostando l'attributo destra/come capire quale attribuire a impostare:

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

Essenzialmente cercando di seguire lo stesso approccio da questo esempio: https://rnplay.org/plays/pOI9bA

Edit: quando tento assegnare esplicitamente il valore aggiornato:

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

(So che questo è il modo corretto di fare le cose in RN). Ho ricevuto l'errore "Impossibile assegnare a sola lettura proprietà" figli "dell'oggetto" # ""

Quindi forse questo è il motivo per cui non può essere aggiornato in RN per qualche motivo?

Answer 1

Invece di tentare di modificare il contenuto del componente <Text>. Ho appena sostituito con <TextInput editable={false} defaultValue={this.state.initValue} /> e ho mantenuto il resto del codice lo stesso. Se qualcuno sa come è possibile modificare il valore di <Text> utilizzando setNativeProps o altro metodo di manipolazioni dirette. Pubblica la risposta e controlla male e accetta.

Answer 2

tag Il testo non ha un puntello text, così

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

non funziona.

Ma il tag testo ha un puntello style, così

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

opere.

Answer 3

Poiché setNativeProps non risolve lo scopo di modificare il contenuto di <Text />, ho utilizzato l'approccio in basso e funziona correttamente. Creare semplici Reagire Component come qui di seguito ...

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