react-native 사용중 알게된점, 아직 해결되지 않은것들..

마데슾 : My Dev Space·2020년 6월 14일

react-native

목록 보기

4/5

01. react-native에서 GlobalStyle 셋팅하기

react-native에서 styled-components의 createGlobalStyle을 사용하여 공통 style을 잡고 싶다.

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  body, * {
    padding:0;
    margin:0;
    font-size:14px;
  }
  li {
    list-style:none;
  }
  button, a{
    text-decoration:none;
    border:none;
    backgorund:none;
  }
  body {
    padding: 0 10px;
  }
`;

import React from 'react';

import { ApolloProvider } from 'react-apollo-hooks';
import ApolloClient from 'apollo-boost';
import apolloClientOptions from './apollo';
import StatusBarComponent from './components/StatusBarComponent';
import BottomTabNavigation from './navigation/BottomTabNavigation';
import { NavigationContainer } from '@react-navigation/native';
import { GlobalStyle } from './styles/common';

const client = new ApolloClient({
  ...apolloClientOptions,
});

function App(): React.ReactElement {
  return (
    <ApolloProvider client={client}>
      <GlobalStyle />
      <StatusBarComponent />
      <NavigationContainer>
        <BottomTabNavigation />
      </NavigationContainer>
    </ApolloProvider>
  );
}

export default App;

이렇게 넣어줬더니 아래와 같은 에러가 발생한다..

공식문서에 찾아보니.. 이렇게 나와있다.

web-only... 그러면 모바일에서 글로벌 스타일을 적용시키려면 어떻게 해야할까..

( 아직 해결 못함.. 계속 찾아보는중.. ㅜㅜ )

참고블로그

02. 입력창 클릭시 키패드에 가려지지 않는 방법

이 포스트에 답이 있는거 같은데.. KeyboardAvoidingView 적용하기

해결..!!
블로깅 링크

방법도 적용시켜보기
- KeyboardAwareScrollView에는 extraScrollHeight 용도로 사용할 수 있는 props가 있다.오.. react native input Do not cover keypad 이렇게 검색해보았더니 그럴싸한 글들이 몇개 나온다..!!
이글 퇴근하고 읽어보기..!! 내가 겪고있는 문제와 같은 글을 올려놓음. React Native Keyboard Covering Inputs
How to make your React Native app respond gracefully when the keyboard pops up

참고블로그

03. 버튼 페이지 하단에 고정하는 방법

참고 블로그

하단 고정 버튼과 컨텐츠 영역을 분리하고 최상위객체(PageWrap)에 flex:1을 준다.

import ReactNative, { View, Button, ScrollView } from 'react-native';
.
.
(생략)
.
.
return (
  <PageWrap style={{ flex: 1 }}>
    <ScrollView>
      <FormBox>
        <InputTitle>프로젝트명</InputTitle>
        <InputText placeholder="프로젝트명을 입력하세요" onFocus={focusInputEvent} />
      </FormBox>
      <FormBox>
        <InputTitle>포지션 및 멤버수</InputTitle>
        <InputText placeholder="포지션을 입력하세요" onFocus={focusInputEvent} />
        <FixBottomButton title="포지션 추가" />
      </FormBox>
      <FormBox>
        <InputTitle>기술스택</InputTitle>
        <InputText placeholder="기술스택 입력 후 엔터" onFocus={focusInputEvent} />
      </FormBox>
    </ScrollView>

    <View>
      <FixBottomButton title="완료" />
    </View>
  </PageWrap>
)

React Native fixed footer

04. 버튼 커스터마이징

styled component를 사용해 react native button을 커스텀마이징 해보려했는데 아무리해도 css가 적용되지 않는다 그래서 구글링 해보았더니 아래와 같은 이유로 react native button을 사용하지 않고 TouchableOpacity안에 Text를 감싸 커스터마이징 한다고 한다.. 오...

04-1. 기본 Button 컴포넌트를 사용하지 않는 이유

기본 Button 컴포넌트를 사용하면 각 플랫폼에 따라 네이티브 버튼이 다르기 때문에 UI 조절이 제한적이고, 일관성이 없게 된다.
Button 컴포넌트는 안드로이드와 ios에서 다르게 보이기 때문에 관리하는데에 어려움이 있다

[ 이미지 참고 블로그 ]
이를 해결하기 위해서는 TouchableOpacity라는 컴포넌트를 사용하여 커스텀 버튼을 제작하면된다
TouchableOpacity
- TouchableOpacity 컴포넌트는 터치 이벤트(onPress 등)를 사용할 수 있는 VIew라고 한다

// button.jsx => styled component
import styled from 'styled-components/native';

export const BorderButtonStyle = styled.Text`
  margin-top: 20px;
  padding: 15px;
  color: #2f80ed;
  background: #fff;
  border: 1px solid #2f80ed;
  border-radius: 5px;
  text-align: center;
`;

// buttonComponent.tsx => button component
import React from 'react';
import { TouchableOpacity } from 'react-native';
import { BorderButtonStyle } from '../styles/button';

export const BorderButton = ({ text, onPress }) => {
  // activeOpacity => 버튼을 눌렀을 때에 투명도가 0.7이 되었다 다시 1로 돌아오게해줌
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <BorderButtonStyle>{text}</BorderButtonStyle>
    </TouchableOpacity>
  );
};

// CreateProject.tsx => page!
<FormBox>
  <InputTitle>포지션 및 멤버수</InputTitle>
  <InputText placeholder="포지션을 입력하세요" onFocus={focusInputEvent} />
  <BorderButton text="포지션 추가" onPress={() => console.log('포지션 추가 버튼 클릭')} />
</FormBox>