React Native：状態ハンドラとコールバックハンドラについて

Question

私はまだReact Nativeを学んでおり、React Nativeの状態、イベントを理解するための非常に単純なアプリケーションを構築しようとしています。

ここでは、このアプリケーションでは、画面にレンダリングするとすぐに「最初」というボタンが表示されます。

このボタンをクリックすると、モーダルが表示されます。このモーダルには、「second」というボタンがあります。

「目的」は、「第2の」ボタンの「onPress」でモーダルを非表示にすることです。

Thsiは私のコードです。

何が起こるか

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

export default class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.showModal = this.showModal.bind(this); 
} 

state = { 
    modalVisible: false, 
} 

hideModal =() => { 
    console.log("Btnpress pressed"); 
    this.setState({modalVisbile: false}); 
} 

showModal() { 
    console.log("BtnPress1 pressed"); 
    this.setState({modalVisible: true}); 
} 

    render() { 
    return (
     <View style={styles.container}> 
     <Button title="first" 
      onPress={this.showModal} 
      disabled={this.state.modalVisible} /> 
     <Modal 
      animationType= "slide" 
      transparent= {false} 
      visible={this.state.modalVisible} 
     > 
     <Button 
      title="second" 
      onPress={this.hideModal} 
      disabled={!this.state.modalVisible} 
      /> 
     </Modal> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
}); 

a）にエラーはありません。 b）アプリケーションが正常にレンダリングされ、「最初」のボタンが表示されます。 c）「最初の」ボタンをクリックすると、モーダルに含まれる2番目のボタン（「秒」）が期待通りにレンダリングされます。 d）しかし、「第2の」ボタンがクリックされると、「最初の」ボタンはレンダリングされません。

私の理解では、「second」ボタンの「onPress」イベントには、状態を変更する以下のコールバックが呼び出されます。

onPress={this.hideModal} 

、標題ボタン（今偽modalVisible =あろう）、その状態を変更した後、「第一」がレンダリングされます。しかし、これは起こっていない。

何人かが間違っていることを伝えることができますか？あなたのコードで

Answer 1

、あなたはスペルを修正した場合、それはそれは..thanksメイトを働い

hideModal =() => { 
console.log("Btnpress pressed"); 
this.setState({modalVisible: false}); /*you had modalVisbile*/ 
}