web-dev-qa-db-ja.com

React Native？

私は現在実験的なReactネイティブアプリに取り組んでいる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: {}
});

上記のコードは、テキストとボタンを表示します。

ただし、ボタンをクリックすると、表示される新しいテキストが表示される代わりに、アプリがクラッシュします。

私はReact Nativeの初心者です。エラーを解決する方法を教えてください。

javascriptiosreactjsreact-nativesetstate
10
SeaWarrior404

状態を使用してデフォルトのテキストを保持し、プレスで状態を更新できます。

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

export default class App extends Component {
  state = {
    textValue: 'Change me'
  }

  onPress = () => {
    this.setState({
      textValue: 'THE NEW TEXT GOES HERE'
    })
  }

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

テキストを動的に変更するために状態を使用できます

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

export default class App extends Component{
constructor(){
    super();
    this.state = {
    textValue: 'Temporary text'
    }
    this.onPressButton= this.onPressButton.bind(this);
}

onPressButton() {
    this.setState({
        textValue: 'Text has been changed'
    })
}

render(){
    return(

<View style={{paddingTop: 20}}>
  <Text style={{color: 'red',fontSize:20}}> {this.state.textValue} </Text>
  <Button title= 'Change Text' onPress= {this.onPressButton}/>
</View>

   );
 }
}
1
Muhammd Asad Chattha

これは、onPress関数が少し変だからです。jsx要素を持たずに、プレスでアクションを呼び出したいのです。 changeTextValueは、ボタンのonPressに渡されるものです。

0
Matt Aft

このアプローチを使用して、ボタンをクリックしたときに値を更新できます

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>
   }
}
0
Chaitanya Parashar