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

こんにちは!かたつむり(@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】端末の向き変更を検知する
↑より、コード変更してみます。
コンソールってどこに表示されるのかなw(npm start したターミナルや19002の開発ツールに表示されました!)

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

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

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

テキストエリアの作成

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

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

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

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

スタイルの設定

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
なぜか文字を打つと右側に出現するようになりましたww

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

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

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

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

  • 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などで角が見切れちゃうので、メニューバーのViewSafeAreaViewに変更。

picture 9

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

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

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

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

わーい!たのしい!

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

コメントを残す

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