TextInput 在本机反应中不起作用我将它与堆栈导航一起使用

Posted 2023-05-07

【中文标题】TextInput 在本机反应中不起作用我将它与堆栈导航一起使用

【英文标题】：TextInput not working in react native I am using it with stack navigation

【发布时间】：2021-05-15 05:17:21

【问题描述】：

所以我正在尝试制作 OTP 身份验证流程。我在 phoneInput 屏幕上输入，然后转到 OTP 验证屏幕。在 OTPVercification 中，我的 textInput 不起作用。

App.js

import * as React from 'react'
import  Button, View, Text  from 'react-native'
import  NavigationContainer  from '@react-navigation/native'
import  createStackNavigator  from '@react-navigation/stack'

import  AuthenticationScreen  from './screens/AuthenticationScreen'
import  HomeScreen  from './screens/HomeScreen'
import  InputOTPScreen  from './screens/InputOTPScreen'

function App() 
  const LoginStack = createStackNavigator()
  const RootStack = createStackNavigator()

  function MainStackScreen() 
    return (
      <LoginStack.Navigator>
        <LoginStack.Screen
          name='Authentication'
          component=AuthenticationScreen
        />
        <LoginStack.Screen name='InputOTP' component=InputOTPScreen />
      </LoginStack.Navigator>
    )
  
  return (
    <NavigationContainer>
      <RootStack.Navigator
        mode='modal'
        headerMode='none'
        initialRouteName='Login'
      >
        <RootStack.Screen name='Login' component=MainStackScreen />

        <RootStack.Screen name='Home' component=HomeScreen />
      </RootStack.Navigator>
    </NavigationContainer>
  )


export default App

AuthenticationScreen.js

import React,  useState, useRef, useEffect  from 'react'
import  globalstyles  from '../styles/globalstyle'
import 
  Button,
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  TextInput,
  Keyboard,
  Platform,
 from 'react-native'
import  TouchableOpacity  from 'react-native-gesture-handler'

export function AuthenticationScreen( navigation ) 
  let textInput = useRef(null)
  const [phoneNumber, setPhoneNumber] = useState('')
  const [focusInput, setFocusInput] = useState(true)
  const [valid, setValid] = useState(false)

  const onChangePhone = (number) => 
    setPhoneNumber(number)
    var matchval = /^[0-9]+$/
    if (number.length === 10 && number.match(matchval)) 
      setValid(true)
     else 
      setValid(false)
    
  
  const onPressContinue = () => 
    if (valid) 
      navigation.navigate('InputOTP')
     else 
      alert('Please enter a valid number')
    
  
  const onChangeFocus = () => 
    setFocusInput(true)
  

  const onChangeBlur = () => 
    setFocusInput(false)
  
  useEffect(() => 
    textInput.focus()
  )

  return (
    <View style=globalstyles.container>
      <KeyboardAvoidingView
        keyboardVerticalOffset=50
        behavior=Platform.OS === 'ios' ? 'padding' : 'height'
        style=globalstyles.containerAvoidingView
      >
        <Text style=globalstyles.textTitle>
          'Please input your mobile number'
        </Text>
        <View
          style=[
            globalstyles.containerInput,
            
              borderBottomColor: focusInput ? '#244DB7' : '#ffffff',
            ,
          ]
        >
          <View style=globalstyles.openDialogView>
            <Text style= fontSize: 16 >'+91'</Text>
          </View>
          <TextInput
            ref=(input) => (textInput = input)
            style=globalstyles.phoneInputStyle
            placeholder='Phone number'
            keyboardType='numeric'
            value=phoneNumber
            onChangeText=onChangePhone
            secureTextEntry=false
            onFocus=onChangeFocus
            onBlur=onChangeBlur
            autoCompleteType='tel'
            maxLength=10
            autoFocus=focusInput
          />
        </View>
        <View style=globalstyles.viewBottom>
          <TouchableOpacity onPress=onPressContinue>
            <View
              style=[
                globalstyles.btnContinue,
                
                  backgroundColor: valid ? '#244DB7' : 'gray',
                ,
              ]
            >
              <Text style=globalstyles.textContinue>Continue</Text>
            </View>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    </View>
  )

InputOTPScreen.js

import React,  useState, useRef, useEffect  from 'react'
import  globalstyles  from '../styles/globalstyle'
import 
  Button,
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  TextInput,
  Platform,
 from 'react-native'
import  ScrollView, TouchableOpacity  from 'react-native-gesture-handler'
import  useFocusEffect  from '@react-navigation/native'

export function InputOTPScreen( navigation ) 
  // TextInput refs to focus programmatically while entering OTP
  const firstTextInputRef = useRef(null)
  const secondTextInputRef = useRef(null)
  const thirdTextInputRef = useRef(null)
  const fourthTextInputRef = useRef(null)
  /////////////////////////////////////
  let otpInput = useRef('')
  const lenghtInput = 4
  const [otpVal, setOtpVal] = useState('')
  const [focusInput, setFocusInput] = useState(true)

  const onChangeOtp = (otp) => 
    setOtpVal(otp)
    console.log(otp)
    if (otp.length === lenghtInput) 
      navigation.navigate('Home')
    
  

   useEffect(() => 
    otpInput.focus()
  , [])

//  useEffect(() => 
//    navigation.addListener('focus', () => 
      // Screen was focused
      // Do something
//     otpInput.focus()
// )
//  , [])

  const textChangeFocus = () => 
    otpInput.focus()
  

  return (
    <View style=styles.container>
      <KeyboardAvoidingView
        keyboardVerticalOffset=50
        //behavior=Platform.OS === 'ios' ? 'padding' : 'height'
        style=globalstyles.containerAvoidingView
      >
        <Text style=styles.textTitle>
          'Input your OTP code sent via SMS'
        </Text>

        <TextInput
          ref=(input) => (otpInput = input)
          onChangeText=onChangeOtp
          style= height: 0, width: 40 
          maxLength=lenghtInput
          value=otpVal
          keyboardType='numeric'
        />
        <View style=styles.containerInput>
          Array(lenghtInput)
            .fill('')
            .map((data, index) => (
              <View
                key=index
                style=[
                  styles.cellView,
                  
                    borderBottomColor:
                      index === otpVal.length ? '#FB6C6A' : '#234DB7',
                  ,
                ]
              >
                <Text
                  style=styles.cellText
                  autofocus=true
                  onPress=textChangeFocus
                >
                  otpVal && otpVal.length > 0 ? otpVal[index] : ''
                </Text>
              </View>
            ))
        </View>
      </KeyboardAvoidingView>
    </View>
  )


const styles = StyleSheet.create(
  container: 
    flex: 1,
  ,
  containerAvoidingView: 
    flex: 1,
    alignItems: 'center',
    padding: 10,
  ,
  textTitle: 
    marginBottom: 50,
    marginTop: 50,
    fontSize: 16,
  ,
  //////////////////
  containerInput: 
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 16,
  ,
  cellView: 
    alignItems: 'center',
    borderBottomWidth: 1.5,
    fontSize: 16,
    justifyContent: 'center',
    margin: 5,
    paddingVertical: 10,
    width: 40,
  ,
  cellText: 
    textAlign: 'center',
    fontSize: 16,
    width: 40,
  ,
  bottomView: 
    flexDirection: 'row',
    //flex: 1,
    //justifyContent: 'flex-end',
    marginBottom: 50,
    marginTop: 20,
    alignItems: 'center',
  ,
  btnChangeNumber: 
    width: 150,
    height: 50,
    borderRadius: 10,
    alignItems: 'flex-start',
    justifyContent: 'center',
  ,
  textChange: 
    color: '#234DB7',
    alignItems: 'center',
    fontSize: 16,
  ,
  btnResend: 
    width: 150,
    height: 50,
    borderRadius: 10,
    alignItems: 'flex-end',
    justifyContent: 'center',
  ,
  textresend: 
    alignItems: 'center',
    fontSize: 16,
  ,
)

请帮助我理解我的代码错误。我可以在网页上输入，但在 OTP 屏幕上的 android TextInput 上不起作用。请帮我解决这个问题

【参考方案1】：

去掉useEffect代码，改变cellView样式的样式：

cellView: 
    alignItems: "center",
    borderBottomWidth: 1.5,
    fontSize: 16,
    justifyContent: "center",
    margin: 5,
    paddingVertical: 10,
    width: 40,
,

必须对 textInput 组件应用宽度

【讨论】：

我试过还是不行。我无法理解它在网络上有效，但在 Andriod 上无效。可能是我正在使用的导航问题或与 useeffect 功能相关的问题？？？？

另外，尝试删除keyboardAvoidingVIew behavior=Platform.OS === 'ios' 中的行为？ '填充'：''

不，现在我的键盘也没有显示出来

试一试 Remove useEffect from the code and add width: 40 in cellView style 我也更新了答案

我已经尝试了上述建议，但仍然无法正常工作。我已经改变了样式表仍然没有改变。删除 useEffect 后，我​​的键盘没有出现。