反应本机 touchableOpacity onPress 更改为输入字段

Question

如何将 touchableOpacity onclick 更改为输入字段？ 再次提到可触摸的不透明度？

<TouchableOpacity
                   onPress={() => {
                     showGradeField();
                   }}
                   style={styles.roundButton}
                 >
                   <Text>TEST</Text>
 </TouchableOpacity>

Answer 1

创建一个 state 变量isEditable来存储文本输入是否处于活动状态或 TouchableOpacity。当 TouchableOpacity 处于活动状态时，按下时切换isEditable 。

对于 TextInput 来说有点困难，因为如果您打开按键，那么当用户按下 TextInput 来编辑文本时，您将切换回 Text 组件，使其不可编辑。 因此，您可以在用户完成编辑时切换事件，例如onBlur 、 onPressOut 、 onSubmitEditing （演示）：

import { useState, useCallback, useRef, useEffect } from 'react';
import {
  Text,
  TextInput,
  View,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

const showToggleValue = false;

export default function EditableText({
  initialIsEditable,
  initialText,
  containerStyle,
  inputStyle,
  textStyle,
  contentContainerStyle,
}) {
  const [isEditable, setIsEditable] = useState(initialIsEditable);
  const [text, setText] = useState(initialText || 'Typing...');
  const toggle = useCallback(()=>setIsEditable(prev=>!prev),[])
  // when switching to TextInput focus it
  const textInputRef = useRef(null);
  useEffect(()=>{
    // focuses the textinput after TouchableOpacity is pressed
    if(isEditable)
      textInputRef.current?.focus()
  },[isEditable])
  return (
    <View style={[styles.container, containerStyle, inputStyle]}>
      <Text>Current using: {isEditable ? 'TextInput' : 'Text'} component</Text>
      {isEditable ? (
        <View style={[styles.pressableContainer, contentContainerStyle]}>
          <TextInput
            ref={textInputRef}
            onChangeText={setText}
            value={text}
            onBlur={toggle}
            onPressOut={toggle}
            onSubmitEditing={toggle}
            style={[styles.inputStyle, inputStyle]}
          />
        </View>
      ) : (
        <TouchableOpacity
          style={[styles.pressableContainer, contentContainerStyle]}
          onPress={toggle}>
          <Text style={textStyle}>{text}</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    margin: 5,
    padding: 5,
  },
  pressableContainer: {
    width: '100%',
    borderBottomWidth: 1,
    margin: 5,
    padding: 5,
    backgroundColor: 'pink',
  },
  inputStyle: {
    padding: 5,
    borderWidth: 0,
  },
});