2017-06-23 30 views
0

Touchable HighlightからのonPressコールからカスタムアラートコンポーネントを起動しようとしています。私はこれを動作させることができませんでした。私はカスタムアラートコンポーネントのレンダリング機能の内部からコンソールログを試みました。このログは表示されないため、この時点ではコードは実行されません。混乱しているのは、これをReact-Native Alertでテストしたとき、これが実行され、Alertが表示されたということです。私は何かを誤解していると感じているので、私がここで間違っていることを理解する助けに感謝します。以前はAlertコンポーネントを使用していましたが、正常に動作しますが、これらのインスタンスでは、onPressから直接警告を呼び出したときしかありませんでした。反応ネイティブのカスタムアラートを返します

onPress() { 
    return (
    <Alert 
     message={i18n('alerts.improvements')} 
    /> 
) 
} 

render() { 
    return (
    <TouchableHighlight onPress={() => this.onPress.bind(this)}> 
     <Text>Test Text</Text> 
    </TouchableHighlight> 
) 
} 

ヒットされませんコンソールログと警告コンポーネント:

class Alert extends Component{ 
    props: { 
    message: string 
    } 

    state = { 
    modalVisible: false, 
    } 

    setModalVisible(visible) { 
    this.setState({modalVisible: visible}); 
    } 

    render() { 
    console.log('modal') 
    return (
     <Modal 
     animationStyle='fade' 
     transparent={true} 
     visible={!this.state.modalVisible} 
     onRequestClose={() => {}} 
     > 
     <View style={styles.container}> 
      <Text style={styles.text}>{this.props.message}</Text> 
     </View> 
     </Modal> 
    ) 
    } 
} 

export default Alert 
+0

あるべき '<警告メッセージ= {...}>'しない 'メッセージ= {...}' – Li357

+0

謝罪視認性isOpen支柱を有します、これはここのタイプミスで、正しいコードを反映するようにこれを更新しました。ありがとう – Lilp

+0

''を 'render'自体にデフォルトで表示されている' true'に置いてチェックしてください。それは動作していて、コンポーネントコードが動作しています。 –

答えて

1

よりもむしろonPressデフォルト表示falseを持っており、renderにそれを置くことができ、それを呼び出します。次に、コンポーネントの可視性を管理するコンポーネントをもう1つ追加します。例えば

in component: 
    <Modal 
      animationType={'fade'} 
      transparent={true} 
      visible={this.props.isOpen} 
      onRequestClose={this.props.actionClose}> 

while calling: 
<ModalBox 
      isOpen={this.props.isOpen} 

Iは

関連する問題