React Native(둘): StatusBar, NavigationBar, TabBar

React Native(하나): 기본 React Native(둘): Status Bar, Navigation Bar와 TabBar React Native(셋째): 사용자 정의 보기 React Native(4): 뉴스 목록 불러오기 React Native(다섯): 위아래 새로 고침 React Native 불러오기(6): 모든 분류와 세부 정보 페이지 불러오기
프로젝트 주소

React Native Apps의 뷰 구조

우선 setup.js의Root와 레이아웃의 코드를 바꾸세요.

class Root extends React.Component {
    render() {
        return (
            
                    
            
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },

});

React Native의 모든 인터페이스는 하나의 메인 화면에 있는데 이곳의 이것은 iOS 중의 Window과 같고 여기Android는 그다지 같지 않다.
물론 iOS와Android에서 운행되긴 했지만 ViewController과Activity로 전시되었다.

StatusBar

iOS와Android의StatusBar는 차이가 많지 않다. 모두 꼭대기 높이 20의 부분으로 신호, 전량 등 시스템의 정보를 표시하는 데 쓰인다.setup.js에 StatusBar:

import {
    StyleSheet,
    Text,
    View,
    StatusBar
} from 'react-native';

class Root extends React.Component {
    render() {
        return (
            
                
            
        );
    }
}

StatusBar의 설정은 여기를 볼 수 있고 일부 속성은 특정 플랫폼에만 적용되는 것을 주의해야 한다.
이렇게 하면 전체App의 StatusBar 스타일을 설정할 수 있고, 어떤 페이지A의 StatusBar가 특수 처리를 필요로 한다면 A 페이지에 StatusBar를 추가하여 설정할 수 있다.

Navigator

우리는 전체 Navigator 를 페이지 사이를 돌릴 수 있도록 App 를 사용해야 한다.Navigator와 iOS의 것은 모두 페이지에 대한 push과pop로 Android의NavigationView와 같은 것이 아니다.
공식 문서 여기 있습니다.
이제 App 폴더에 새 파일을 만듭니다App.js.

'use strict';


import React from 'react'

import {
    StyleSheet,
    View,
    Text

} from 'react-native';

export default class App extends React.Component {

    render() {
        return (
            
        main
            
        )
    }
}

const styles = StyleSheet.create({
    view: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center'

    },
});

그리고 setup 내StatusBar 아래에 Navigator:

import App from './App'


 {
        BackAndroid.addEventListener('hardwareBackPress', function() {
            if(navigator == null){
                return false;
            }
            if(navigator.getCurrentRoutes().length === 1){
                return false;
            }
            navigator.pop();
            return true;
        });

        let Component = route.component;
        return 
        //     route.params                 
    }}
/>

그중initialRoute은 component를 설정하여 맨 밑에 있는 첫 페이지이다.
그리고 renderScene 제어push할 때 어떤 조작을 하는지 여기BackAndroid.addEventListener는 감청Android의 물리적 리턴 버튼을 눌렀다.
현재 실행 시 페이지 중간에 개main가 표시됩니다.
너는 왜 NavigationBar 없었는지 발견할 수 있을 거야. 우리 뒤에 추가하자.

tab-navigator

공식적으로TabBar가 없습니다. 저희는 제3자react-native-tab-navigator를 사용합니다.
프로젝트 루트에서 명령 실행하기

npm install react-native-tab-navigator --save

설치가 완료되면 App.js 가입TabNavigator:

const home_key = 'home'
const satin_key = 'satin'
const setting_key = 'setting'


import Home from './Home/Home'
import Satin from './Satin/Satin'
import Setting from './Setting/Setting'



     }
        renderSelectedIcon={() => }
        onPress={() => this.setState({ selectedTab: home_key })}>
    
        
    
     }
        renderSelectedIcon={() => }
        onPress={() => this.setState({ selectedTab: satin_key })}>
    
        
    
     }
        renderSelectedIcon={() => }
        onPress={() => this.setState({ selectedTab: setting_key })}>
    
        
    

배치도 비교적 이해하기 쉽다.
추가 파일 3개Home.js, Satin.js 및 Setting.js

import React from 'react'

import {
    View,
    StyleSheet
} from 'react-native'


export default class Satin extends React.Component {
    render() {
        return (
            

            
        )
    }
}

const styles = StyleSheet.create({
    view: {
        flex:1,
        backgroundColor: 'orange'
    }
})

각각 다른 색깔을 설정할 수 있어 인터페이스를 클릭하여 전환해도 뚜렷하다.
구체적인 코드는 항목을 볼 수 있다

NavigationBar

정부에서도 제공하지 않은 것에 동의합니다. NavigationBar 사용자 정의가 필요합니다.
그리고 Home.js, Satin.js, Setting.js에 가입

import React from 'react'

import {
    View,
    StyleSheet
} from 'react-native'

import NavigationBar from '../Custom/NavBarCommon'


export default class Home extends React.Component {
    render() {
        return (
            
                

            
        )
    }
}

const styles = StyleSheet.create({
    view: {
        flex:1,
        backgroundColor: 'white'
    }
})

navibar
프로젝트 주소