react native中文本输入的条件渲染

Question

How do you render a textInput conditionally such that when the value text in the textInput characters is less than 6, it logs an error when the user clicks the ok button

const [text, setText] = useState('')
<TextInput
  style={styles.textInputStyle}
  value={text}
  onChangeText = {(text) => setText(text)}
  placeholder="Text"
  placeholderTextColor="#60605e" />
<TouchableOpacity style={styles.button}
  onPress={() => {setText(text)} }>
  <Text style={styles.buttonTitle}>OK</Text>
</TouchableOpacity>

Answer 1

Your onPress callback can manage this. It needs to do a check for text.length < 6 and then branch based off of the result. It might look like this (I removed the styling logic to showcase the callback):

const MyComponent = () => {
  const [text, setText] = useState('');

  return (
    <>
      <TextInput
         value={text}
         onChangeText = {(text) => setText(text)}
      />
      <TouchableOpacity
        onPress={() => {
          if(text.length < 6) {
            // Alert user of invalid input
            Alert.alert("Input must be less than 6 characters!") ;
            return;
          }
          // ... continue on to the desired task
        }}
      >
        <Text>OK</Text>
      </TouchableOpacity>
    </>
  );
}