목차
개요
RN 프로젝트에 material ui components인 NativeBase를 적용해 보자.
라이브러리 설치
아래에 명령어로 NativeBase를 설치합니다.
npm install native-base --save
설치가 완료되면 아래에 명령어로 NativeBase와 프로젝트를 연결합니다.
0.60 이상
cd ios
pod install
cd ..
0.59 이하
react-native link native-base
사용법
우리는 기본적으로 사용한적이 있는 경우만 블로그로 작성합니다. 따라서 여기에 작성된 내용은 우리가 사용할 때마다 추가될 것입니다.
사용법에 대한 자세한 사항은 공식 홈페이지를 참조하세요.
- 공식 사이트: NativeBase
ActionSheet
ActionSheet를 사용하기 위해서는 프로젝트 전체를 NativeBase의 <Root> 컴포넌트로 감싸줘야 합니다.
Functional Components - Root
import React from 'react';
import { Root } from 'native-base';
import { ThemeProvider } from 'styled-components';
import Theme from './Theme';
import Navigator from './Screen/Navigator';
interface Props {}
interface State {}
const App = ({}: Props) => {
return (
<Root>
<ThemeProvider theme={Theme}>
<Navigator />
</ThemeProvider>
</Root>
);
};
export default App;
Class Components - Root
import * as React from 'react';
import { Root } from 'native-base';
import { ThemeProvider } from 'styled-components';
import Theme from './Theme';
import Navigator from './Screen/Navigator';
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
render() {
return (
<Root>
<ThemeProvider theme={Theme}>
<Navigator />
</ThemeProvider>
</Root>
);
}
}
ActionSheet를 표시하고 싶은 부분에 아래와 같이 코딩합니다.
Functional Components - ActionSheet
...
import { ActionSheet } from 'native-base';
...
const ActionButtons = ['English', '日本語', '한국어', 'Cancel'];
const cancelButtonIndex = ActionButtons.length - 1;
return (
<Container>
<Button
onPress={() =>
ActionSheet.show(
{
options: ActionButtons,
cancelButtonIndex: cancelButtonIndex,
destructiveButtonIndex: cancelButtonIndex,
},
(buttonIndex: number) => {
alert(buttonIndex);
}
)
}>
Test
</Button>
</Container>
);
};
Class Components - ActionSheet
...
import { ActionSheet } from 'native-base';
...
render() {
const ActionButtons = ['English', '日本語', '한국어', 'Cancel'];
const cancelButtonIndex = ActionButtons.length - 1;
return (
<Container>
<Button
onPress={() =>
ActionSheet.show(
{
options: ActionButtons,
cancelButtonIndex: cancelButtonIndex,
destructiveButtonIndex: cancelButtonIndex,
},
(buttonIndex: number) => {
alert(buttonIndex);
}
)
}>
Test
</Button>
</Container>
);
}
- options: string 타입으로 된 리스트(string[])나 아이콘을 포함한 리스트(Array<{ text: string, icon?: string, iconColor?: string }>) 형식을 지원합니다.
- cancelButtonIndex: 취소 버튼의 위치입니다.
- destructiveButtonIndex: 삭제 버튼의 위치입니다.(빨간색 글자 버튼을 표시하고 싶은 위치입니다.)
- title: ActionSheet의 제목입니다.
- (buttonIndex: number) => { alert(buttonIndex); }: 선택된 버튼의 index를 넘겨줍니다.
참고
- 공식 사이트: NativeBase
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
책 홍보
저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.
이번에 쓴 책은
아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
이번에 쓴 책은
스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
