#3 React Native Navigation 번역 정보
#3 React Native Navigation 번역본문
Adding buttons to the navigator
네비게이션 막대 단추는 화면 구성 요소 정의에 정적 navigatorButtons = {...};를 추가하여 화면별로 정의 할 수 있습니다. 이 객체는 화면이 처음 생성 될 때 전달 될 수도 있습니다. 화면을 누를 때 무시 될 수 있습니다. 핸들러를 navigator.setOnNavigatorEvent (콜백)로 설정하여 버튼에 대한 onPress 이벤트를 처리합니다.
class FirstTabScreen extends Component {
static navigatorButtons = {
rightButtons: [
{
title: 'Edit', // for a textual button, provide the button title (label)
id: 'edit', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
testID: 'e2e_rules', // optional, used to locate this view in end-to-end tests
disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
showAsAction: 'ifRoom' // optional, Android only. Control how the button is displayed in the Toolbar. Accepted valued: 'ifRoom' (default) - Show this item as a button in an Action Bar if the system decides there is room for it. 'always' - Always show this item as a button in an Action Bar. 'withText' - When this item is in the action bar, always show it with a text label even if it also has an icon specified. 'never' - Never show this item as a button in an Action Bar.
},
{
icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
}
]
};
constructor(props) {
super(props);
// if you want to listen on navigator events, set this up
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
if (event.type == 'NavBarButtonPress') { // this is the event type for button presses
if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
AlertIOS.alert('NavBar', 'Edit button pressed');
}
if (event.id == 'add') {
AlertIOS.alert('NavBar', 'Add button pressed');
}
}
}
render() {
return (
<View style={{flex: 1}}>...</View>
);
}
Buttons object format
{
rightButtons: [{ // buttons for the right side of the nav bar (optional)
title: 'Edit', // if you want a textual button
icon: require('../../img/navicon_edit.png'), // if you want an image button
id: 'compose', // id of the button which will pass to your press event handler
testID: 'e2e_is_awesome', // if you have e2e tests, use this to find your button
disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
}],
leftButtons: [] // buttons for the left side of the nav bar (optional)
}
Floating Action Button (FAB) - Android only
각 화면에는 화면의 오른쪽 아래 구석에 표시되는 단일 팹이있을 수 있습니다.
- 간단한 Fab:
static navigatorButtons = {
fab: {
collapsedId: 'share',
collapsedIcon: require('../../img/ic_share.png'),
backgroundColor: '#607D8B'
}
};
- 확장 상태 예제 Fab
fab: {
collapsedId: 'share',
collapsedIcon: require('../../img/ic_share.png'),
expendedId: 'clear',
expendedIcon: require('../../img/ic_clear.png'),
backgroundColor: '#3F51B5',
actions: [
{
id: 'mail',
icon: require('../../img/ic_mail.png'),
backgroundColor: '#03A9F4'
},
{
id: 'twitter',
icon: require('../../img/ic_twitter.png'),
backgroundColor: '#4CAF50'
}
]
}
Contextual TopBar Menu - Android only
컨텍스트 메뉴는 UI의 특정 항목이나 컨텍스트 프레임에 영향을주는 작업을 제공합니다. 모든 보기에 대한 상황에 맞는 메뉴를 제공 할 수 있지만 대부분 사용자가 각 항목에 대해 직접 작업을 수행 할 수있는 ListView, GridView 또는 다른보기 모음의 항목에 사용됩니다. (Android 설명서에서 가져옴)
this.props.navigator.showContextualMenu(
{
rightButtons: [
{
title: 'Add',
icon: require('../img/add.png')
},
{
title: 'Delete',
icon: require('../img/delete.png')
}
],
onButtonPressed: (index) => console.log(`Button ${index} tapped`)
}
);
ContextualMenu의 스타일을 지정하려면 화면의 navigatorStyle에서 다음 속성을 사용하십시오.
static navigatorStyle = {
contextualMenuStatusBarColor: '#0092d1',
contextualMenuBackgroundColor: '#00adf5',
contextualMenuButtonsColor: '#ffffff'
};
Styling the tab bar
앱을 처음 만들 때 (startTabBasedApp에서) tabsStyle 객체를 전달하여 탭 막대 모양의 스타일을 지정할 수 있습니다.
Navigation.startTabBasedApp({
tabs: [ ... ],
tabsStyle: { // optional, add this if you want to style the tab bar beyond the defaults
tabBarButtonColor: '#ff0000'
}
});
Style object format
{
tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
tabBarBackgroundColor: '#551A8B' // change the background color of the tab bar
}
지원되는 모든 스타일이 여기에 정의됩니다. 모든 스타일을 보여주는 예제 프로젝트가 있습니다.
Deep links
딥 링크는 내부 앱 paths/routes를 나타내는 문자열입니다. 일반적으로 푸시 알림 페이로드에 표시되어 알림을 클릭 할 때 표시 할 앱 섹션을 제어합니다. 예를 들어 채팅 앱에서 알림을 클릭하면 '채팅'탭에서 관련 대화를 열 수 있습니다.
딥 링크의 또 다른 사용 케이스는 한 화면에서 다른 형제 화면에서 일어나는 일을 제어하려고 할 때입니다. 일반적으로 화면은 자체 스택에서만 누를 수 있습니다. 예를 들어 형제 탭의 네비게이션 스택에 액세스 할 수 없습니다. 채팅 앱 예제로 돌아가서 '주소록' 탭에 있는 연락처를 클릭하면 '채팅' 탭에서 관련 대화를 열고 싶다고 가정합니다. 탭은 형제이므로 딥 링크를 트리거하여 이 동작을 얻을 수 있습니다.
onContactSelected(contactID) {
this.props.navigator.handleDeepLink({
link: 'chats/' + contactID
});
}
팁 : 딥 링크는 측면 드로어 작업을 처리하는 데 권장되는 방법이기도합니다. 측면 드로어 화면은 나머지 앱과 비슷한 형제이기 때문에 딥 링크를 트리거하여 다른 화면을 제어 할 수 있습니다.
Handling deep links
모든 딥 링크 이벤트는 모든 화면에 브로드 캐스팅됩니다. 화면은 setOnNavigatorEvent를 사용하여 핸들러를 정의하여 이러한 이벤트를 들을 수 있습니다 (버튼 이벤트를 수신하는 것과 매우 유사합니다). 이 핸들러를 사용하여 화면은 링크 문자열을 구문 분석하여 발견된 관련 링크를 처리하여 링크를 필터링 할 수 있습니다.
export default class SecondTabScreen extends Component {
constructor(props) {
super(props);
// if you want to listen on navigator events, set this up
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent(event) {
// handle a deep link
if (event.type == 'DeepLink') {
const parts = event.link.split('/');
if (parts[0] == 'tab2') {
// handle the link somehow, usually run a this.props.navigator command
}
}
}
Deep link string format
딥 링크의 형식에 대한 지정은 없습니다. 핸들러에서 파싱 로직을 구현하기 때문에 원하는 형식을 사용할 수 있습니다.
Third party libraries support
react-native-vector-icons
툴바 아이콘에 react-native-vector-icons을 사용하려면 이 예 또는 이 요령을 따르십시오.
Mobx
Milestones
The general goals for this version are:
- react-native-controllers will be deprecated and fully merged into react-native-navigation.
- iOS - Redesign and Refactor
- Android - Redesign and Refactor
- Complete feature parity between Android and iOS
The main feature that we are planning for this version are:
Version 2.1.0
The general goals for this version are:
- Android tests
- iOS tests
- Activity results
공감
0
0
댓글 0개