reactnative

React NativeのTextInputをインライン要素のように使う方法(よりよい方法求む)

概要

React NativeのTextInputコンポーネントをインライン要素のように用いる方法が分からず、試行錯誤した結果1つの方法を見つけたので共有します。
ただ、見つけた方法は素直な方法ではないと思われるので、より良い方法をご存知の方はぜひコメント等お願いします。

実現したいもの

ところどころがテキストインプットになっている以下のような文章です。

49063.jpg

実現する方法

App.js に以下のように記述すれば実現することができます。
ポイントは

  • 親コンポーネントに flexDirection: 'row', flexWrap: 'wrap' というスタイルを与える
  • 文章を1文字ずつTextコンポーネントにする(実際には配列の map などで行う)

の2点です。この2点目のポイントが素直でないので、より良い方法を探しています。

App.js
import React from 'react';
import { View, Text, TextInput } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <TextInput style={{width: 40}}></TextInput>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <TextInput style={{width: 40}}></TextInput>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <TextInput style={{width: 40}}></TextInput>
        <Text></Text>
      </View>
    );
  }
}