리액트 네이티브텍스트 입력 옵션

리액트 네이티브텍스트 입력 옵션

프로젝트에 TextInput을 사용하고 있으며, 아래 스크린샷에서 공유되는 (컷/복사/붙여넣기/공유)와 같은 모든 종류의 텍스트 선택이나 액션을 비활성화하려고 합니다.

네이티브 대응 공식 문서에서 아무것도 찾을 수 없습니다.

2개의 속성을 추가해야 합니다.selectTextOnFocus그리고.editable

예를 들어 다음과 같습니다.

<TextInput editable={false} selectTextOnFocus={false} />

문자 입력 속성만 입력해 주세요.editable={false}

context Menu Hidden은 사용자가 텍스트를 특정 필드에 붙여넣지 않도록 설정하고 컨텍스트메뉴를 숨깁니다

업데이트: 이것은 아직 릴리즈에 포함되어 있지 않습니다.링크를 클릭하여 태그를 확인함으로써 커밋의 릴리스를 항상 확인할 수 있습니다.0.55까지는 안정적인 발매를 기대하기 힘들 것 같아요.

<TextInput contextMenuHidden={true} />

여기서 커밋을 체크합니다.텍스트 입력 컨텍스트메뉴를 숨기는 Add 옵션

상위에서 pointerEvents를 none으로 설정합니다.View의TextInput터치 이벤트를 디세블로 하려면 , 다음의 예를 검토해 주세요.

<View pointerEvents="none">
  <TextInput ... />
</View>

보기를 사용하여 removeClippedSubviews={true}(Android와 함께 작동)를 사용하고 contextMenuHidden={true}(IOS와 함께 작동)를 사용할 수 있습니다.

<View removeClippedSubviews={true}> <TextInput contextMenuHidden={true} /> </View>

다음 호부터의 레퍼런스

const App = () => {
  const [selection, setSelection] = useState(null);
  const [text, setText] = useState('');

  return (
    <TextInput 
      selection={selection}
      onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
      value={text}
      onChangeText={(text) => setText(text)}
      style={{ alignSelf: 'center', width: 200, marginTop: 50, backgroundColor: 'grey' }} 
    />
  );
};

복사/붙여넣기를 피하기 위해 다음 솔루션이 도움이 됩니다.OnTouchEnd 이벤트에서 키보드를 지웁니다.

const [text1, setText1] = useState('')
    
const clearClipboard = () =>{
 Clipboard.setString('')
}
    
const onChangeText = (text) =>{
 //For android 12+ clipboard autofill option, dont allow text change more than one char..which means user is typing.
 if(text1.length+1 >= text.length){
  setText1(text)
 }
}
    
<TextInput onChangeText={onChangeText} value={text1} contextMenuHidden={true} onTouchEnd={clearClipboard}></TextInput>

복사 자르기 붙여넣기와 같은 모든 작업을 사용하지 않으려면 carletHidden={true}을(를) 사용하십시오.또한 커서도 숨겨집니다.

이 속임수는 나에게 통했다.Native Base를 사용하고 있습니다.이것을 보관해 주세요<TextInput>내부<Item>태그. 이제 선택 속성이 작동하지 않습니다.

코드 샘플이 아래에 첨부되어 있습니다.

<Item>
<Input
  value={this.props.call_state.destination}
  onChangeText={text => this.props.setDestination(text)}
  returnKeyType={"done"}
  keyboardType={"numeric"}
/>
</Item>

먼저 네이티브 베이스를 설치한 후 Import해야 합니다.{Item}컴포넌트의 네이티브 베이스에서

언급URL : https://stackoverflow.com/questions/42883864/disable-options-on-react-native-text-input