入力がネイティブに反応する - クラッシュするアプリケーションが表示される

Question

入力テキストを3秒間押すと、「アプリケーション名が停止しました」というメッセージが表示されます。これを修正する方法は？ .................................................. .........................

私のコンポーネント

return (
     <ReactNative.TextInput 
      ref={(ref: any) => { this.input = ref; }} 
      style={styleInputFormDefault} 
      numberOfLines={this.state.numberOfLines} 
      blurOnSubmit={true} 
      editable={this.state.editable} 
      underlineColorAndroid={"transparent"} 
      value={this.state.value} 
      multiline={this.state.multiline} 
      placeholder={this.state.placeholder} 
      keyboardType="default" 
      onChange={event => { 
       this.value = event.nativeEvent.text; 
      }} 
      onEndEditing={event => { 
       this.value = event.nativeEvent.text; 
       if (this.props.onChange != undefined) { 
        !this.props.onChange(this.value); 
       } 
      }} 
      returnKeyType={this.state.returnKeyType} 
      onSubmitEditing={() => { 
       if (this.props.onSubmit != undefined) { 
        this.props.onSubmit(this); 
       } 
      }} 
      onFocus={() => { 
       if (this.props.onFocus != undefined) { 
        this.props.onFocus(); 
       }; 
      }} 
      onBlur={() => { 
       if (this.props.onBlur != undefined) { 
        this.props.onBlur(); 
       }; 
      }} 
     > 
     </ReactNative.TextInput> 

    ); 

Answer 1

なぜそのようなTextInputコンポーネントを使用していますか？反応したネイティブからTextInputだけをインポートするだけです。

このコードを試してみてください。

import React, { Component } from 'react' 
import { TextInput } from 'react-native' 

export default class InputClassName extends Component { 
    constructor(props) { 
    super(props) 
    this.input = null 
    this.state { 
     [...] 
    } 
    } 

    render() { 
    return(
     <View> 
     <TextInput 
      ref={ref => this.input = ref} 
      style={styleInputFormDefault} 
      numberOfLines={this.state.numberOfLines} 
      blurOnSubmit={true} 
      underlineColorAndroid={"transparent"} 
      value={this.state.value} 
      multiline={this.state.multiline} 
      placeholder={this.state.placeholder} 
      keyboardType="default" 
      onChangeText={value => this.value = value} 
      onEndEditing={event => { 
       // I do not know what you're trying to do here 
       // Are you checking if the onChange props is a function? If so, do this instead: 
       // if("function" === typeof this.props.onChange) { [...] } 
       this.value = event.nativeEvent.text; 
       if (this.props.onChange != undefined) { 
        !this.props.onChange(this.value); 
       } 
      }} 
      returnKeyType={this.state.returnKeyType} 
      onSubmitEditing={() => { 
       // same goes here 
       if (this.props.onSubmit != undefined) { 
        this.props.onSubmit(this); 
       } 
      }} 
      onFocus={() => { 
       // also here 
       if (this.props.onFocus != undefined) { 
        this.props.onFocus(); 
       }; 
      }} 
      onBlur={() => { 
       // and here. 
       if (this.props.onBlur != undefined) { 
        this.props.onBlur(); 
       }; 
      }} 
     > 
     </TextInput> 
     { /* Please note that you can also use propTypes in order to force (recommended) 
      a specific prop to be the typeof whatever you want instead of using if/else */ } 
     </View> 
    ) 
    } 
}