web-dev-qa-db-ja.com

React Native-TextInputカーソル位置の設定

私のReactネイティブアプリで、TextInputのカーソル位置を特定の位置（たとえば、5番目の文字）に設定しようとしていますが、そうするのに問題があります。ドキュメントには少し不足しています。TextInputの 'setSelection'プロパティと関係があるのではないかと思いますが、何をすべきかわからないようです。

誰かが成功しましたか？

ありがとう。

androidiosreact-native
12
coldbuffet

TextInputに selection プロパティが追加され、選択またはキャレット/カーソルの位置を設定できるようになりました。

7
laurent

@ this.lau_が言うように、開始キーと終了キーを持つオブジェクトを受け入れるselectionというコントローラープロパティがあります。

例：

class ControlledSelectionInput extends Component {
    state = {
        selection: {
            start: 0,
            end: 0
        }
    }

    // selection is an object: { start:number, end:number }
    handleSelectionChange = ({ nativeEvent: { selection } }) => this.setState({ selection })

    render() {
        const { selection } = this.state;

        return <TextInput selection={selection} onSelectionChange={this.handleSelectionChange} />
    }
}

次のように、コンポーネントへの参照を取得し、setNativePropsを使用して、プログラムで選択を設定することもできます。

this.inputRef.setNativeProps({ selection:{ start:1, end:1 } })

例：

class SetNativePropsSelectionInput extends Component {
    inputRef = null

    render() {
        const { selection } = this.state;

        return (
            <View>
                <TextInput ref={this.refInput} />
                <Button title="Move selection to start" onPress={this.handleMoveSelectionPress} />
            </View>
    }

    refInput = el => this.inputRef = el

    handleMoveSelectionPress = () => this.input.setNativeProps({
        selection: {
            start: 0,
            end: 0
        }
    })
}
7
Noitidart

私はネイティブの方法を知っています：

public static void adjustCursor(EditText dgInput) {
    CharSequence text = dgInput.getText();
    if (text instanceof Spannable && text.length() > 0) {
        Spannable spanText = (Spannable) text;
        Selection.setSelection(spanText, text.length());
    }
}

たぶん、同じメソッドをReact Nativeで見つけることができます。

0
tiny sunlight

テキスト入力がフォーカスされている場合にのみ選択が機能するようです

あなたはそれを機能させるために次のことをすることができます

class YourComponent extends React.Component{
      constructor(props) {
       super(props);
       this.state = {
       text:'Hello World',
       selection: {
        start: 0,
        end: 0
       }
  };

this.inputRefs = {};
}

   setSelection = () => {
      this.setState({ select: { start: 1, end: 1 } });
      };

    changeText = (val) => {
     this.inputRefs.input.focus();
    }

    render(){
       return(
          <TextInput 
            onFocus={this.setSelection}
            selection={this.state.setSelection} 
            onChangeText={val => {this.changeText(val)}} 
            value={this.state.text}
             refName={ref => {
             this.inputRefs.input = ref;
             }}
            />
       )
    }
}

アイデアは、TextInputがonChangeTextコールバックを呼び出すたびに、refsを介してTextInputにフォーカスを置きます。コンポーネントはonFocusコールバックに応答しているので、そのコールバックに選択を設定します

0
Aakash Daga

ドキュメントにsetSelectionプロパティがありません https://facebook.github.io/react-native/docs/textinput.html もサポートされていないと思いますコアで。

Androidでこれを行う場合は、Tinyのコードを使用して、独自のネイティブコンポーネントを構築することをお勧めします。 https://facebook.github.io/react-native/docs/native-modules-Android.html#content

もちろん、スキルがあればiOSでも同じことができます... https://facebook.github.io/react-native/docs/native-modules-ios.html#content

0
Chris Geirman