テキストを変更する方法React Nativeのボタンを押すと値が変わりますか？

Question

現在実験的なReact Nativeアプリを開発中のiOS開発者です。 ボタンとサンプルテキストを画面に表示する次のコードがあります。

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

    export default class App extends React.Component { 

    constructor() { 
    super(); 
    this.state = {sampleText: 'Initial Text'}; 
    } 

    changeTextValue =() => { 
    this.setState(
    {sampleText: 'Changed Text'} 
    ); 
    } 

    _onPressButton() { 
    <Text onPress = {this.changeTextValue}> 
    {this.state.sampleText} 
    </Text> 
    } 

    render() { 
    return (
    <View style={styles.container}> 
    <Text onPress = {this.changeTextValue}> 
     {this.state.sampleText} 
    </Text> 

    <View style={styles.buttonContainer}> 
     <Button 
     onPress={this._onPressButton} 
     title="Change Text!" 
     color="#00ced1" 
     /> 
    </View> 

    </View> 
); 
} 
} 

const styles = StyleSheet.create({ 

container: { 
    flex: 1, 
    backgroundColor: '#f5deb3', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
buttonContainer: { 

} 
}); 

上記のコード表示テキストとボタン しかし、私はアプリケーションが代わりに表示される新しいテキストを示すのクラッシュボタンをクリックします。 Im new to React Native、エラーを解決する方法を親切に教えてください。

Answer 1

あなたのchangeTextValue *あなたのデフォルトのテキストを維持し、その後、プレスに、我々は状態に

import React, {Component} from 'react'; 
import {Text, Button} from 'react-native'; 

export default class App extends Component{ 
    constructor(){ 
     super(); 
     this.state = { 
      textValue:'Change me' 
     } 
    } 

    onPress() { 
     this.setState({ 
      textValue: "THE NEW TEXT GOES HERE" 
     }) 
    } 

    render(){ 
     return(
     <View style={{paddingTop: 20}}> 
      <Text style={{color: 'cyan'}}>{this.state.textValue}</Text> 
      <Button title="Change Text" onPress={this.onPress}/> 
     </View> 
     ); 
    } 
} 

Answer 2

これは、あなたのonPress関数がちょっと変わったので、jsx要素を持たずにpressでアクションを呼び出したいからです。あなたのchangeTextValueはあなたのボタンのonPressに渡されるべきものです。

Answer 3

は、あなたがより良い_onPressButton（）が何をしているかを確認してボタン

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { val: 0 } 
    this.update = this.update.bind(this) 
    } 
    update() { 
    this.setState({ val: this.state.val + 1 }) 
    } 
    render() { 
    console.log('render'); 
    return <button onClick={this.update}>{this.state.val}</button> 
    } 
} 

Answer 4

のクリックで値を更新するため、このアプローチを使用することができます。この機能ではのsetState（）を実行するだけで問題は解決します。新しいものをレンダリングする場合は、return（）を追加してTextをラップアップする必要があります。