【5】React Nativeでテキストエディタを作ってみる！【テキストエリア作成編】

SHARE

こんにちは！かたつむり(@Katatumuri_nyan)です！

Reactを触ってみて、サイト的なものは作れるようになりました(*´ω｀)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)

Dockerでの環境構築が難しかったので、やっとWSLで環境構築できました～！
これからテキストエリアを作成していきたいと思います！

最初から見る↓
【1】React Nativeでテキストエディタを作ってみる！【下調べ編】【1】React Nativeでテキストエディタを作ってみる！【下調べ編】

前回を見る↓
【4】React Nativeでテキストエディタを作ってみる！【再び環境構築編】【4】React Nativeでテキストエディタを作ってみる！【再び環境構築編】

環境

  • Windows10
  • WSL2
  • Expo
  • React Native
  • AndroidStudio
  • iPhone
  • iPad

WSL2にReact NativeとExpoが入っています！

とりあえず、タブレット用の画面を作っていきます！
iPadとAndroidStudioのタブレットエミュレーターを確認しながら作ります。

picture 2

iPadは横向きになるけど、Androidはならないですね💦
ExpoかReact Native側の設定かなー💦

横向きはできるんですが、Expoを開くと横から縦になるんですよね。なんでだろう。
iPhoneも横向きにならない💦
コードで改善するかもなので進めます。

画面の向き検知

【ReactNative】端末の向き変更を検知する
↑より、コード変更してみます。
コンソールってどこに表示されるのかなｗ(npm start したターミナルや19002の開発ツールに表示されました！)

React Nativeで画面を回転させた際に再描画させる方法

expoでdefaultの画面の向きを設定する。
↑これで一応横にはなりました！でも、次は縦にならないｗｗ

とりあえず、横向きになったので、これでいきます！

テキストエリアの作成

React Nativeにテキストエリアコンポーネントの準備がない！
自作するとエラーがでる！
ってことで↓
What is an alternative of textarea in react-native?

TeaxtInputコンポーネントが使えるそうなので使います。

でか、HTMLもCSSも使えないじゃん！
Reactと違いすぎるｗ

困ってしまってワンワンわわん
ウェブビューみたいなの使ったら使えた気もしますが、、ちょっと分からないので進めていきます。

スタイルの設定

React Nativeで動的スタイルを作成できますか？

この辺から集中して作ってるので、メモ書きになります💦
URLとかペタペタ張っていくかも。

とりあえず、関数による動的なスタイルの作成の仕方が分かった。

import React from 'react';
import { FC, useEffect, useState} from 'react';
import { StyleSheet, TextInput, View, Dimensions} from 'react-native';

export default function App() {
  const [windowWidth, setWidth] = useState(100)
  const [windowHeight, setHeight] = useState(100)

  useEffect(() => {
    let Width = Dimensions.get('window').width;
    let Height = Dimensions.get('window').height;
    setWidth(Width)
    setHeight(Height)
  }, []);

  function AppStyle(){
    return ({
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'stretch',
      width: windowWidth,
      height: windowHeight,
      backgroundColor: 'black',
    })
  }

  return (
    <View style={AppStyle()}>
        <MyPanel
        value="panel"
        />
      <MyTextArea/>
        <MyPreview
          value="ぷれびゅ～"
        />
    </View>
  );
}

picture 3

大分怪しい見た目ですが、とりあえず、パネル+テキストエリア+ぷれびゅ～のエリアは作成できました。

入力をぷれびゅ～に反映

マークダウンで書くことを想定しているので、PreviewはHTMLのつもりです。
ですが、まずはテキストエリアに書いた物をそのままPreviewしていきたいと思います。

picture 4
できたぁ

これはReactのコンポーネント間の値の受け渡し方と一緒ですね。

テキストエリアのスタイル変更

テキストエリアの文字の位置変更

なぜかAndroidだけ、テキストエリアの真ん中に文字がくるので変えます。

公式ドキュメントにありました！

textAlignVertical

ちなみに、CSS的な物を書けるのですが、数値は0みたいに数字だけ書くか、"0%"みたいに％つけてクウォーテーションで囲むらしいです。
AndroidとiPadと全然適応が違いすぎてむずかしいですう。

テキストの頭に数字をつける

できなさそう…。

マークダウンに対応してみる。

iamacup/react-native-markdown-display
ライブラリの使い方がまだ謎ですが、挑戦してみます！

npm install -S react-native-markdown-display

とりあえず、使ってみましたがエラー…？

Failed building JavaScript bundle.
Unable to resolve module punycode from /home/mymai/ReactNative_TextEditor/node_modules/markdown-it/lib/index.js: punycode could not be found within the project.

punycodeがないらしいですね。
npm i punycodeしてみます。
expo再起動
（果たしてライブラリが使えるように私はなるのか！）

picture 5

↑いけました！
右上のtextってやつですね。中身は## textなので、ちゃんとできてます。

Previewコンポーネントと置き換えていきます。

picture 6
なぜか文字を打つと右側に出現するようになりましたｗｗ

どうやら置き換えるんじゃなくて、中に入れるといいらしい

<Markdown style={styles.preview}>
    {props.value}
  </Markdown>

↓

<Text style={styles.preview}>
    <Markdown>
      {props.value}
      </Markdown>
  </Text>

iPadでpaddingがきかない😢
Androidは入力中にMarkdownコンポーネントが動くｗｗｗ
なんやこれｗ

  • Android→謎
  • iPad→Markdownコンポーネントが浮いてるっぽい

こちらは、Markdownライブラリのスタイルを上書きすることで治りました。

picture 7

メニューバーの追加

メニューバーを上に追加していきます。
こればコンポーネントでいけそう

ViewコンポーネントがHTMLでいうdivみたいな物っぽいので、それを使っていきます。

picture 8 

import React, { Component } from 'react';
import { View,StyleSheet, Text} from 'react-native';

export default function MenuBar(props) {

  return (
    <View style={styles.menuBar}>
      <Text>バー</Text>
    </View>

  );
};

const styles = StyleSheet.create({
  menuBar: {
    backgroundColor: '#35071e'
  }
});

色が怪しいですが、こんな感じで基礎を作りました。

ここに閉じるボタンとかおきたい。

ボタンの追加

ボタンコンポーネント使っていきます。

ボタンのスタイルが変えられない💦

Expoにボタンの作り方があったのでこちらからボタンを作ります。

あと、iPhoneなどで角が見切れちゃうので、メニューバーのViewをSafeAreaViewに変更。

picture 9

またまた怪しいですが、とりあえずのボタン完成ですｗ

<SafeAreaView style={styles.menuBar}>
    <Pressable style={styles.button}>
      <Text style={styles.buttonText}>閉じたい</Text>
    </Pressable>
    <Text>🐌SimpleMarkdown</Text>
</SafeAreaView>

こんな調子でパネルやメニューバーに、色んなボタンを作っていこうかなと思います。

とりあえず、アプリが作れることは分かってきたので、今日はこの辺で終わります(*´ω｀)

わーい！たのしい！

↓続き
【6】React Nativeでテキストエディタを作ってみる！【データ管理編】【6】React Nativeでテキストエディタを作ってみる！【データ管理編】

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【4】React Nativeでテキストエディタを作ってみる！…

次の記事

【6】React Nativeでテキストエディタを作ってみる！…