소개

여러분, React Native를 사용하십니까! ! ?
이번에는 React Native를 사용하고 TextInput 주위에서 고전했기 때문에 그 대책 방법을 공유하겠습니다.

이 내용은 React Native meetup#3에서 말씀하신 내용과 일부 씁니다.
발표 내용은 이쪽입니다. 「 리액트 네이티브 철벽 키보드 」

※기본 코드는 공식적으로 배차하고 있습니다.

무슨 일이 일어나는가?

iOS에서는 TextInput이 키보드에 쓰는 문제가 발생합니다. 입력은 할 수 있습니다만, 입력 도중의 문자는 보이지 않고, 「이 어플로 해서부터 사용하고 싶지 않아ー」등과 UX에 큰 영향을 주어 버리는 것이 우려됩니다. 무엇보다 개발자로서 제대로하고 싶은 것이라고 생각합니다.

그냥 어딘가 느낌!

대책 방법

이 문제를 해결하기 위해 다음 방법을 소개합니다. 아직 미숙자이기 때문에 다른 좋은 방법이있을 수 있습니다.

아무도 잘하는 장면, 서투른 장면이 있습니다. 그 때문에 3개로 나누어 소개하겠습니다.

다중 양식 (단일도 가능) & ScrollView

단일 폼 & Flex layout

다중 양식 (단일도 가능) & Flex layout

단일 폼 or 복수 폼 & ScrollView를 사용할 때의 대책

react-native-keyboard-aware-view 을 사용한다.

<KeyboardAwareScrollView ref='scroll'>
  <View>
    <TextInput style={styles.input}/>
  </View>
</KeyboardAwareScrollView>

ScrollView 구성 요소는 나오지 않지만 내부적으로 ScrollView가 확장됩니다.
설치하는 것만으로 쉽게 작동합니다.

_scrollToInput (reactNode: any) {
  // Add a 'scroll' ref to your ScrollView
  this.refs.scroll.scrollToFocusedInput(reactNode)
}

  <TextInput onFocus={(event: Event) => {
        this._scrollToInput(ReactNative.findNodeHandle(event.target))
  }/>

이와 같이 세밀한 제어를 할 수도 있습니다.
매우 훌륭합니다! ! .

다만, flex를 취급할 수 없고, UI 구현에는 height, width등을 사용해 조정을 해 가야 합니다.

단일 폼 & Flex 레이아웃을 사용할 때의 대책

react-native-keyboard-aware-scroll-view 을 사용한다.

이곳은 KeyboardSpacer 컴포넌트를 배치하고 키보드가 열리면 이것의 높이가 늘어나 화면이 올라갑니다.

class DemoApp extends Component {
  render() {
    return (
      <View style={[{flex: 1}]}>
        {/* Some random image to show scaling */}
        <Image source={{uri: 'http://img11.deviantart.net/072b/i/2011/206/7/0/the_ocean_cherry_tree_by_tomcadogan-d41nzsz.png', static: true}}
                 style={{flex: 1}}/>

        {/* The text input to put on top of the keyboard */}
        <TextInput style={{left: 0, right: 0, height: 45}}
              placeholder={'Enter your text!'}/>

        {/* The view that will animate to match the keyboards height */}
        <KeyboardSpacer/>
      </View>
    );
  }
}

매뉴얼적으로, 여기는 화면을 올린다, 주지 않는다, 키보드라고 쓰는 것 같다고 할 수 없습니다.
하지만, flex인 것은 유지하면서 키보드를 딱 입지 않는 위치에 가져올 수 있으므로, 자주 있는 화면 하단에 입력 폼이 배치되고 있는 것 같은 레이아웃에서는 매우 효력을 발휘합니다 .

다중 양식(단일도 가능) & Flex layout

scrollView가 아니라 flex View 또한 복수 폼으로 대응시키고 싶어서, 이쪽의 패키지를 작성했습니다.
react-native-flex-keyboard-spacer
아직, 방금 할 수 있었기 때문에 다소 버그가 있을지도 모릅니다. 문서도 업데이트합니다.

class TextField extends Component {    
   render() {
        const { style, label, spacerProps } = this.props;
        return (
            <View style={[styles.container, style]}>
                <Text style={styles.label}>{label}</Text>
                <TextInput {...spacerProps(this)} style={styles.textInput} />
            </View>
        );
    }
}

const App = (props) => {
    const { spacerProps } = props;
    return (
        <View style={styles.container}>
            <TextField spacerProps={spacerProps[0]} label="form1" style={{ flex: 4 }} />
            <TextField spacerProps={spacerProps[1]} label="form2" style={{ flex: 3 }} />
            <TextField spacerProps={spacerProps[2]} label="form3" style={{ flex: 2 }} />
            <TextField spacerProps={spacerProps[3]} label="form4" style={{ flex: 1 }} />
        </View>
    );
};

export default keyBoardSpacer({
    numbers: 4,
})(App);

불행히도 mesure 메서드를 사용하기 때문에 TextInput을 포함하는 구성 요소가 SFC이면 작동하지 않습니다.

<TextInput {...spacerProps(this)} style={styles.textInput} />

스프레드 연산자를 사용하여 props.spacerProps[index]를 실행하여 요소의 위치를 ​​확인하고 키보드가 표시될 때 키보드와 쓰여지는지를 계산하고 덮어 버린다면 입지 않는 위치까지 화면을 이동시켜 줍니다.
여기는 scrollView를 사용하지 않으므로 flex를 사용하여 UI를 만들 수 있습니다.

버그, issue등 있으면 보고 받을 수 있으면 수정하겠습니다. 또, PR이나 의견등 받을 수 있으면 가능한 한 대응하겠습니다 때문에, 사용해 주시면 다행입니다.
또, 그 밖에는 이런 방법이 있다고 하는 것이 있으면 가르쳐 주실 수 있으면 다행입니다・・・・! !

마지막으로

꼭 쾌적한 RN 라이프를 보내 주실 수 있기를 바랍니다! !