ReactNativeで複数行TextInputをスクロールしたときにfocusが当たるのを回避したい..出来たが...

## 課題
メモ帳アプリで、１ページ丸々TextInputのページがあって、
そこでscrollするとフォーカスもあたってしまうという問題





##　やり方1 TextInputを別要素で囲って制御する

参考：https://www.366service.com/jp/qa/cabd3c41d1468c813e5c2447e6911a01

ScrollView > TouchableHighlight > TextINput



でtextInputはpointerEvents=noneにしておく(pointerEventsはstateにset)。TextInputではイベントを拾わずScrollは外側のscrollViewで実現する。
PressはTouchableHighlightで拾い、そこでInputTextのpointerEventsをautoに変更し、ref経由でfocusを実行する。という感じ。


scrollとフォーカスの制御は問題なかったが、以下の点で問題があった。

- フォーカスした時のkeybord避けにkeybord-spacerを使っていたのだが、高さが微妙にキーボードに被ってしまう。

- なので..自分でキーボード表示時のにScrollViewの高さを変更して調整しようと考えたが...
 - ScrollViewや内部の要素にheightを指定するとスクロール出来ない。=>外をViewで囲って高さを指定することでクリア。
 - TouchableHighligh、TextInputに高さが指定できないので、新規作成のときは１行だけの高さしかなくてタッチ出来る範囲が狭くなる。不便。
 - キーボーどと被らないかもしれないが、Viewの一番下がキーボードの直上にくる。選択した位置がキーボードの上に来るわけではないので、これでは駄目.... 更にScrollToなどでの調整が必要
 - 高さをDimensions.get('window').heightから取得するとはみ出してしまう..navigationヘッダーやSafeareaを考慮しないと行けない。ちょっと小さめにしておくことが必要か.
 
- そもそもフォーカスをした時に、タッチした位置が選択状態にならない、もう１回タッチしないと行けない。これがでかい。



ちょっと、課題が多すぎる..まだまだ時間がかかってしまう..

一応参考ソース

```react
<ScrollView>
    <TouchableOpacity
        onPress={(e) => this.onpressWrapper(e)}
    >
        <TextInput
            style={[styles.textInput ]}//高さを指定するとscrollがそこで止まる
            multiline={true}
            onChangeText={(text) => this.save(text)}
            onFocus={() => console.log("focus")}
            defaultValue={this.state.text}
            pointerEvents={this.state.pointerEvents}
            ref={this.textInputRef}
        />
    </TouchableOpacity>
</ScrollView>
```

```react
this.textInputRef = React.createRef();
onpressWrapper = (e) => {
    const ref = this.textInputRef.current
    this.setState({
        pointerEvents: 'auto',
    }, ref.focus())
}
```

## やり方2 InputScrollView
以下使ってみる..
https://github.com/baijunjie/react-native-input-scroll-view

ここもスクロール制御は良いけど、フォーカスとキーボード回避がネック。
KeybordAvoidanceViewを使っており、１行程度がキーボードと被ってしまう。。。
フォーカス時にも上手くタッチ位置がキーボード上に来ない。




## 結論
スクロールでフォーカスが当たるほうがまだ使いやすい...
色々なテクニカルなことは他にもありそうだけど、もうちょっと余裕のある時に検討。
あとはネイティブで作ったらどういう挙動なんだろうか、確認したい所。

### やり方3 
InputScrollViewの中を見て、以下のコードをパクったら確かにscroll時にfocusが当たらなくなった。responderを使うと。
しかし一報で、keybordSpacerが効かなくなってしまった。(キーボードに被ってスクロールしていってしまう....)
もう少しで出来そうなのに...


これ以上はどんどん、トリッキーになって行きそうだし、、
規模も小さいアプリ出し、ネイティブアプリに変更しようかな。


```javascript
onFocus = event => {
    const target = event.target;
    this._curFocus = target;
}

onBlur = event => {
    const target = event.target;
    if (this._curFocus === target) this._curFocus = null;
}

_checkhandleGesture = event => {
    const target = event.target;
    if (target === this._curFocus) return false;
    const targetInst = event._targetInst;
    const uiViewClassName = targetInst.type || // >= react-native 0.49
        targetInst.viewConfig.uiViewClassName; // <= react-native 0.48
    return uiViewClassName === 'RCTTextField' || uiViewClassName === 'RCTTextView' || uiViewClassName === 'RCTMultilineTextInputView';
};




renderScrollTextInput = () => {
    return (
        <ScrollView
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            style={{ flex: 1 }}
        >
            <View style={{ flex: 1 }} onStartShouldSetResponderCapture={isIOS ? this._checkhandleGesture : null}>
                {this._renderInputText()}
            </View>
        </ScrollView>
    )
}

```


### やり方4:編集モードと非編集モードを制御するのがよいのか?