失敗しましたプロップタイプ：無効な小道具値の「KEYBOARDTYPE」 - ReactNative

Question

私は私がやろうとしています何

Warning: Failed prop type: Invalid prop 'keyboardType' of value "supplied to 'TextInput' expected one of ["default", "email-address", etc]

言って警告を抱えているが、選択dropdownに基づいkeyboardTypeを変更しました。

正常に動作していますが、引き続きこのエラーが発生します。私は何が間違っているのか分からない。私はまだReactとReactNativeの新人です。誰かがどのように物事がどのように働くかを説明し、私にそれを行う方法の例を与えることができれば、本当に感謝します。

ここに私のコードだ

import ModalDropdown from 'react-native-modal-dropdown'; 

const types = ['Phone', 'Email Address', 'Name', 'Address']; 
export default class SampleComponent extends Component{ 
constructor(props) { 
super(props); 
this.state = { 
    dataInput: '', 
    typeOfKeyboard: '', 
}; 
} 

// this is how I set the state to be inputed in my `keyboardType` props 
typeSelectedOnSelect(id, value) { 

if(value== 'Phone'){ 
    this.setState({typeOfKeyboard: 'numeric'}); 
}else if(value== 'Email Address'){ 
    this.setState({typeOfKeyboard: 'email-address'}); 
}else{ 
    this.setState({typeOfKeyboard: 'default'}); 
} 
} 

render(){ 

<View style={{flexDirection: 'column', flex: 1, padding: 20}}> 
        <Text style={styles.contactTypeText}>Contact Type</Text> 
        <ModalDropdown 
           options={types} 
           onSelect={this.contactTypeOnSelect.bind(this)} 
           style={styles.dropdownContainer} 
           dropdownStyle={styles.dropdownStyle} 
           textStyle= {styles.dropdownText} 
        /> 

    <TextInput label="Type anything" keyboardType={this.state.typeOfKeyboard} onChangeText={(dataInput)=>this.setState({dataInput})} value={this.state.dataInput} /> 
       </View> 

助けてくれてありがとう！

Answer 1

typeOfKeyboardの初期状態が空であるためです。

「デフォルト」に変更するか、nullにします。 docs

KEYBOARDTYPE？：列挙型（「デフォルト」、「メールアドレス」、「数値」、 の電話パッド」、「アスキー対応」、「数値と句読点」から 、 'URL'、 '数-パッド'、 '名前・電話・パッド'、 '小数パッド'、 'さえずり'、 'のウェブ検索'）

は、egnumeric開くためにどのキーボードを決定します。

次の値は、プラットフォーム間で動作します：

デフォルトの数値のメールアドレス電話パッド

'？'

Answer 2

{some expression}はオブジェクトですがthis.state.typeOfKeyboardは文字列なので、keyboardType=this.state.typeOfKeyboardの代わりにkeyboardType={this.state.typeOfKeyboard}を使用する必要があります。 あなたは試してみることができます。