[RN] react-native-web + typescript = .tsx

타입을 정의하면 더좋겠다 싶어서

세팅을 진행행하던중

에러에러에러 탕탕탕!!!

 

 

 

webpack.cofing error

 

왜그러는걸까..ㅠㅠ

삽질을 1시간정도 하니까 결과가 나왔다 ㅎㅎㅎ;;;

 

 

//babel.config.js

module.exports = {
  presets: [
    //[
    'module:metro-react-native-babel-preset',
    '@babel/preset-react',
    '@babel/preset-typescript',
    //],
  ],
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        useTransformReactJSXExperimental: true,
        runtime: 'automatic',
      },
    ],
  ],
};

// web/webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const appDirectory = path.resolve(__dirname, '../');

module.exports = {
  entry: [path.resolve(appDirectory, 'index.web.js')],
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['@babel/preset-react'],
            plugins: ['react-native-web'],
          },
        },
      },
      {
        test: /\.(t|j)sx?$/,
        exclude: /node_modules\/(?!()\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['@babel/preset-react'],
            plugins: ['react-native-web'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

  plugins: [new HtmlWebpackPlugin({template: './public/index.html'})],

  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: ['.web.tsx', '.web.js', '.ts', '.tsx', '.js', '.json'],
  },
};

// App.web.tsx (기존: App.web.js)

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

/**
 * Section
 */
type SectionProps = PropsWithChildren<{
  title: string;
}>;
function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          // eslint-disable-next-line react-native/no-inline-styles
          {
            color: isDarkMode ? '#f00' : '#000',
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          // eslint-disable-next-line react-native/no-inline-styles
          {
            color: isDarkMode ? '#f00' : '#000',
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#f00' : '#000',
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View>
          <Text>:)</Text>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">룰루랄라 See Your Changes</Section>
          <Section title="Debug">룰루랄라 Debug</Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

/**
 * styles
 */
const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

 

 

위에 처럼 수정을 하고 나니 따란!

react-native-web + typescript 세팅 후 실행된 모습

 

잘 된당!!!!야호!

App.web.tsx는 react-native를 세팅하고 나면 App.tsx파일에 작성된 내용을 일부 가져왔다.

후훗!