React Native의 TextInput에서 줄 바꿈에 따라 입력 상자의 높이 (스타일)를 변경하고 싶습니다.

안녕하세요!

이번은 「React Native TextInput에서 개행에 따라 입력 박스의 스타일을 변경하는」방법에 대해서, 전해 가고 싶습니다.

이번에는 다음과 같은 간단한 입력 박스를 예로 설명하고 싶습니다.

개행했는지 어떨지를 취득하려면 onContentSizeChange 를 사용한다

우선, 전제로, 개행을 유효하게 하려면 TextInput 의 multiline={true} 를 설정해 둡니다.

<TextInput
  multiline={true}
/>

그런 다음 TextInput 의 props 를 onContentSizeChange 로 설정합니다.

export default function SplashScreen() {
const [inputMsg, setInputMsg] = useState('');
return (
  <TextInput
    style={{fontSize: 50}}
    multiline={true}
    value={inputMsg}
    onContentSizeChange={(event) => {
      console.log(event.nativeEvent.contentSize); //例：Object {"height": 60, "width": 32,}
}
    }
  />
);

이것은 입력값이 바뀔 때마다 불리는 콜백 함수로, { nativeEvent: { contentSize: { width, height } } } 를 취득할 수가 있습니다.
이번에는 이 height의 값을 사용합니다.

※ width 는 문자수에 따라서 변화해, height 는 개행에 의해 변화합니다.
※폰트 사이즈등에 의해, 변화량도 다릅니다.

예제를 사용하면서 이러한 값이 어떻게 변화하는지 살펴 보겠습니다.

예 1 1문자 입력했을 때

출력 결과는・・・

  <TextInput
    style={{fontSize: 50}}
    multiline={true}
    value={inputMsg}
    onContentSizeChange={(event) => {
      console.log(event.nativeEvent.contentSize); 
      //出力結果： Object {"height": 60, "width": 32,}
}
    }
  />
);

예 2 1문자 입력 + 개행 1회했을 때

  <TextInput
    style={{fontSize: 50}}
    multiline={true}
    value={inputMsg}
    onContentSizeChange={(event) => {
      console.log(event.nativeEvent.contentSize); 
      //出力結果： Object {"height": 119.66666666666667, "width": 32,}
}
    }
  />
);

height 의 값이 커지고 있는 것을 알 수 있습니다.
이 값을 사용하여 입력 상자의 스타일을 변경하고 싶습니다.

줄 바꿈에 따라 입력 상자의 스타일 변경

개행하면, 동적으로 입력 박스의 높이를 넓히도록 해 봅니다.
방금 전의 nativeEvent.contentSize.height 는 state 로 관리합니다.

export default function SplashScreen() {
  // 入力ボックスの高さはstateで管理
  const [inputHeight, setInputHeight] = useState(0);
  return (
    <View style={styles.container}>
      <View
        style={[
          // 入力ボックスの高さ = nativeEvent.contentSize.height
          styles.inputContainer, {height: inputHeight},
        ]}
      >
        <TextInput
          style={{fontSize: 50}}
          placeholder="type here..."
          multiline={true}
          onContentSizeChange={(event) => {
            // 入力ボックスの高さをsetState
            setInputHeight(event.nativeEvent.contentSize.height);
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems:'center',
    justifyContent:'center',
  },
  inputContainer: {
    backgroundColor: 'yellow',
    width: 300,
  },
});

입력 상자 높이에 상한 설정

이미 동적으로 입력 상자의 높이를 설정할 수있었습니다.
하지만 지금은 입력 상자가 화면 가득 찼습니다.



높이에 상한을 설정하기 위해 조건 분기를 추가합니다.

// （省略）

<TextInput
  style={{fontSize: 50}}
  placeholder="type here..."
  multiline={true}
  onContentSizeChange={(event) => {
    console.log(event.nativeEvent.contentSize);
　　 /* 入力の高さが300より大きい場合は上限値300を設定する */
    if (event.nativeEvent.contentSize.height <= 300) {
      setInputHeight(event.nativeEvent.contentSize.height);
    } else {
      setInputHeight(300);
    }
  }}
/>

// （省略）

이것에 의해, 높이에 상한치를 설정할 수 있었습니다. (이번에는 상한 4행이 되도록 조정하고 있습니다)

요약

상당히 간단하게 써 버렸습니다만,
위와 같이 쓰면 입력 상자의 높이를 변경할 수 있습니다.
원한다면 시도해보십시오.

참고

React Native 공식 문서
htps : // 레아 ct 나치ゔぇ. v / cs / sc 로트 l ゔ ぃ w