如何通过可更改的可编辑道具强制关注TextInput-REACT-NATIVE

Question

我有一个TextInput框，我想显示为文本。然后，当通过单击“编辑”按钮将其设置为editable时，输入将成为焦点。

当前，当未设置可编辑时，它将专注于按钮的按下，但是在设置了此功能时将不起作用。

我尝试过： -删除可编辑的 -重新创建零食错误

小吃：https://snack.expo.io/HyRFapVYH

相关代码：

export default () =>  {
  const [value, setValue] = useState('Rei');
  const [active, setActive] = useState(false);

  const input = useRef(null);
  const onPress = () => {
    setActive(!active);
    input.current.focus();
  };

    return (
      <View style={styles.container}>
        <TextInput 
          style={styles.paragraph}
          value={value}
          onChangeText={setValue}
          ref={input}
          selectTextOnFocus
          editable={active}
        />
        <TouchableOpacity style={styles.button} onPress={onPress}>
        <Text>{ active? `Save me` : `Edit me`}</Text>
        </TouchableOpacity>
      </View>
    );
}

我希望当我单击“编辑”按钮时，TextInput会处于焦点并突出显示文本。