결과물

1. 헤더 & 네비게이션 만들기

App.js

React Navigation 라이브러리를 이용해서 해당 게시글 작성 페이지를 Navigator에 등록해줘야한다.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import BoardPage from '@/pages/board';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator id="MainStack" initialRouteName="Home">
				...
        <Stack.Screen
          name="글 작성하기"
          component={BoardPage}
          options={{
            title: '게시글 작성',
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleAlign: 'center', // 헤더 제목 중앙 정렬
            headerIconColor: 'black', 
            textColor: 'black',
            headerTintColor: 'black',
            headerTitleStyle: {
              fontWeight: 'bold',
              color: 'black',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

그런 후 어느 페이지에서든 다음과 같은 방법으로 이동하면 된다. push / navigate 가능

<Button
  title="게시글 작성하기"
  onPress={() => navigation.push('글 작성하기')}
/>

2. Button BaseComponent

./src/components/Buttot/index.js

재사용하기 위한 만든 Button Component

import { TouchableOpacity as RNButton } from 'react-native';
import Text from '@/components/Text';
import { theme } from '@/theme/color';
const Button = (props) => {
  const { style, onPress, text } = props;
  return (
    <RNButton
      style={[
        {
          alignItems: 'center',
          backgroundColor: theme.main,
          padding: 10,
        },
        style,
      ]}
      onPress={onPress}
    >
      {text && (
        <Text
          style={{
            color: 'white',
          }}
        >
          {text}
        </Text>
      )}
    </RNButton>
  );
};

export default Button;

3. Text BaseComponent

./src/components/Text/index.js

RN에서 제공하는 Text를 디자인에 맞게 재사용하기 위해 만들어줬고, TitleText는 Title에 해당하는 Text Component를 생성했다.

재사용할 때 컴포넌트의 유연성을 챙기기 위해 props로 전달 받음

import { Text as RNText } from 'react-native';

const DEFAULT_FONTSIZE = 14;
const DEFAULT_FONTWEIGHT = 'bold';

const Text = (props) => {
  const { children, style } = props;
  return (
    <RNText
      style={[
        {
          fontSize: DEFAULT_FONTSIZE,
          fontWeight: DEFAULT_FONTWEIGHT,
        },
        style,
      ]}
    >
      {children}
    </RNText>
  );
};

export const TitleText = (props) => {
  const { children, style } = props;
  return (
    <RNText
      style={[
        {
          fontSize: 34,
          fontWeight: 'bold',
        },
        style,
      ]}
    >
      {children}
    </RNText>
  );
};
export default Text;

4. TextInput BaseComponent

./src/components/TextInput/index.js

TextInput Component도 마찬가지로 재사용하기 위해 생성했고, MultilineTextComponent도 생성