목차
개요
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
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
