私のReactネイティブアプリで、TextInput
のカーソル位置を特定の位置(たとえば、5番目の文字)に設定しようとしていますが、そうするのに問題があります。ドキュメントには少し不足しています。TextInput
の 'setSelection'プロパティと関係があるのではないかと思いますが、何をすべきかわからないようです。
誰かが成功しましたか?
ありがとう。
TextInput
に selection プロパティが追加され、選択またはキャレット/カーソルの位置を設定できるようになりました。
@ 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
}
})
}
私はネイティブの方法を知っています:
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で見つけることができます。
テキスト入力がフォーカスされている場合にのみ選択が機能するようです
あなたはそれを機能させるために次のことをすることができます
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コールバックに応答しているので、そのコールバックに選択を設定します
ドキュメントに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