輸入文字驗證本機反應

Question

我有以下代碼：

 <TextInput placeholder={"PID"}  keyboardType = 'numeric'  editable = {true}    maxLength = {10} value={this.state.text}  onChangeText={(text) => this.setState({text})} />   
 <Button title='NEXT' onPress= {() => navigate('service', { text: this.state.text})}> </Button>

我想驗證輸入字段，如下所示：如果輸入的長度等於10，請按一下按鈕轉到服務頁面。否則顯示警告消息。

我怎樣才能做到這一點？

Answer 1

manage = () => {
    if (this.state.text.length === 10) {
        navigate('service', { text: this.state.text})})
    } else {
        alert('Your PID must be exactly 10 characters!')
    }
}

render() {
    return (<Button onPress={this.manage} ... />)
}

Answer 2

親愛的:)您需要使用路由包，例如react-navigation或react-native-router-flux（我喜歡后面的內容），用它定義您的頁面，並在onPress函數中使用簡單的if else語句...

每個路由包都為編程導航提供了一個簡單的調用。