【9】React Nativeでテキストエディタを作ってみる！【デザインからアプリの見た目作成編】

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { ThemeProvider } from 'react-native-elements';
import theme from './theme/theme';
import TopBar from './components/TopBar/TopBar';

export default function App() {

  return (
    <ThemeProvider theme={theme} >
      <StatusBar style="auto" />
      <View style={styles.container}>
        <Text>ここに子コンポーネント</Text>
      </View>
    </ThemeProvider>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.Night.main.mainBackgroundColor,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

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

export default function TopBar(props) {

    return(
        <Text>ここに子コンポーネント</Text>
    )
}

export default theme = {
    Night: {
        main: {
            mainBackgroundColor: '',
            secondBackgroundColor: '',
            scrollBarColor: ''
        },
        textView:{
            backgroundColor: '',
            textColor:''
        },
        toolBar: {
            titleTextColor: ''
        },
        nav: {
            IconColor: ''
        },
        menu: {
            TitleColor: ''
        },
        menuBtn: {
            BackgroundColor: '',
            TextColor: '',
            IconColor: '',
            onPress: {
                BackgroundColor: '',
                TextColor: '',
                IconColor: '',
            }
        },
        menuBtnChild: {
            BackgroundColor: '',
            TextColor: '',
            IconColor: '',
            BoderColor: '',
            onPress: {
                BackgroundColor: '',
                TextColor: '',
                IconColor: '',
                BoderColor: '',
            }
        },
        PlusBtn: {
            BackgroundColor: '',
            IconColor: '',
        },
        typeSelectMenu: {
            BackgroundColor: '',
            TextColor: '',
            IconColor: '',
            onPress: {
                BackgroundColor: '',
                TextColor: '',
                IconColor: '',
            }
        }
    },
}

{
    "theme":"Night",
    "preview":"Inheritance",
    "autoSave":"30"
}

// readSetting.js
import * as FileSystem from 'expo-file-system';

const snailSetting = {
    "theme": "Night",
    "preview": "Inheritance",
    "autoSave": "30"
}

export default async function readSetting() {
    const directoryUri = FileSystem.documentDirectory + 'SimpleMarkdown/setting/'
    const settingFileName = 'snailSetting.json'
    const fileUri = directoryUri + settingFileName
    let settingData

    await FileSystem.makeDirectoryAsync(directoryUri, { intermediates: true })
        .then(e => {
        }).catch(err => {
            console.error(err);
        })

    const fileList = await FileSystem.readDirectoryAsync(directoryUri)
        .then(e => {
            return e
        }).catch(err => {
            console.error(err);
        })

    if (fileList.includes(settingFileName) === false) {
        settingData = await FileSystem.writeAsStringAsync(fileUri, JSON.stringify(snailSetting), { encoding: FileSystem.EncodingType.UTF8 })
            .then(e => {
                return e
            }).catch(err => {
                console.log(fileUri);
                console.error("writeAsStringAsync >>" + err);
            })
    } else {
        settingData = await FileSystem.readAsStringAsync(fileUri, { encoding: FileSystem.EncodingType.UTF8 })
            .then(e => {
                return e
            }).catch(err => {
                console.error("readAsStringAsync >>" + err);
            })
    }

    return JSON.parse(settingData)
}

// App.js
const[appTheme,setAppTheme]=useState(null)

useEffect(()=>{
  readSetting().then(e=>{
    setAppTheme(e.theme)
    console.log('useEffect'+e.theme);
  })
}, [])

import React from 'react';
import {Text } from 'react-native';
import { useTheme} from 'react-native-elements';


export default function Title(props) {
    const { theme } = useTheme();

    const style={
        color: theme.topBar.titleTextColor
    }

    return (
        <Text style={style}>{props.title}</Text>
    )
}

// App.js

export const fileDataGetter = React.createContext()

export default function App() {
  const [appTheme, setAppTheme] = useState(null)
  const [title, setTitle] = useState("aaatitle")

  const fileDataGetterValue={
    appTheme,
    setAppTheme,
    title, 
    setTitle
  }

...

if (os == 'iOS') {
    FS = FileSystem
} else if (os == 'Android') {
    FS = StorageAccessFramework
}

const [appTheme, setAppTheme] = useState(null)
const os = Device.osName

useEffect(() => {
  readSetting(os).then(e => {
    console.log(JSON.parse(e).theme);
    setAppTheme(JSON.parse(e).theme)
  })
}, [])

<ThemeProvider theme={theme[appTheme]} >

<ThemeProvider theme={theme}>
...

import fileDataGetter from '../../../App';

export default function name(props) {
  const { appTheme } = useContext(fileDataGetter)
  let { theme } = useTheme();
  theme = theme[appTheme]
...