React Native에서 iOS 상태 표시 줄 배경색을 설정하는 방법은 무엇입니까?

반응식 기본 iOS 기본 코드에 iOS 상태 표시 줄 backgroundColor를 설정하기 위해 수정할 수있는 단일 위치가 있습니까? RCTRootView.m?React Native에서 iOS 상태 표시 줄 배경색을 설정하는 방법은 무엇입니까?

react native StatusBar component은 에만 해당합니다. Android 용 배경색은입니다.

iOS operating system seems to allow setting status bar backgroundColor

내 목표는 어두운 상태 표시 줄의 색상을하는 것입니다.

출처

2016-09-02 Ed of the Mountain

이 단추를 사용하여 작업 표시 줄을 갖는 소스 코드를 얻는 방법은 있습니까 (메뉴, 검색 등)? 감사합니다. – AlainIb

https://github.com/oblador/react-native-vector-icons에는 https://material.io/icons/에있는 Google 머티리얼 디자인 아이콘과 여기에서 탐색 할 수있는 많은 다른 아이콘이 포함되어 있습니다. https://oblador.github.io/react-native-vector-icons/ –

iOS에는 상태 표시 줄 bg의 개념이 없습니다. 다음은 크로스 플랫폼 방식으로이를 줄 방법은 다음과 같습니다

1가)이 추가 :

import React, { 
    Component, 
} from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    View, 
    StatusBar, 
    Platform, 
} from 'react-native'; 

const MyStatusBar = ({backgroundColor, ...props}) => (
    <View style={[styles.statusBar, { backgroundColor }]}> 
    <StatusBar translucent backgroundColor={backgroundColor} {...props} /> 
    </View> 
); 

class DarkTheme extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <MyStatusBar backgroundColor="#5E8D48" barStyle="light-content" /> 
     <View style={styles.appBar} /> 
     <View style={styles.content} /> 
     </View> 
    ); 
    } 
} 

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight; 
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    statusBar: { 
    height: STATUSBAR_HEIGHT, 
    }, 
    appBar: { 
    backgroundColor:'#79B45D', 
    height: APPBAR_HEIGHT, 
    }, 
    content: { 
    flex: 1, 
    backgroundColor: '#33373B', 
    }, 
}); 

AppRegistry.registerComponent('App',() => DarkTheme);

출처

2016-09-02 21:08:08 jmurzy

와우! Android 및 iOS에서 방금 테스트했습니다. 완전한! 그것은 바로 사용할 수있는 뛰어난 크로스 플랫폼 솔루션입니다! 게시 해 주셔서 감사합니다. 나는 이것이 많은 개발자들을 도울 것이라고 기대한다. –

정말 기뻤습니다! – jmurzy

나는 '구성 요소를 탐색 할 수는 있지만 작동하지 않습니다 (상단 테두리를 시도하고 그 안에 다른 구성 요소를 삽입했습니다). 어떤 아이디어? –

은 app.js의 상단에 import { StatusBar } from 'react-native';를 추가 한 후 흰색에 상태 표시 줄 텍스트/아이콘을 변경하려면 render()의 첫 번째 행으로 StatusBar.setBarStyle('light-content', true);을 추가합니다.

다른 색상 옵션은 'default' 및 'dark-content'입니다.

자세한 내용은 https://facebook.github.io/react-native/docs/statusbar.html을 참조하십시오.

그 외 : 아니요, 제공 한 링크를 따라야합니다.

출처

2016-09-02 19:04:07 dv3

이상적으로, StatusBar.setBarStyle()에 대한 호출을 어디에 두겠습니까? render() 및 내 루트 구성 요소의 componentWillMount에 넣으려고했으나 Xcode를 열심히 충돌 시켰습니다 ...이 호출을 넣을 좋은 후보가 될 다른 지점이 있습니까? 감사! –

OK - 문제가 해결되었을 수도 있습니다. 내가 언급하지 않은 다른 두 가지 문제가 있습니다. 1) NavigatorIOS를 StatusBar와 함께 사용하고 있습니다. (예를 들어 일반 Navigator를 사용한 대부분의 예제) 2) 기기에서 ** 테스트 중입니다. ** 릴리스 구성. 그래서 ...이를 해결하기 위해 루트 컴포넌트에서 호출을 가져 와서 NavigatorIOS의 initialRoute (ToDoList라고 부르 자)에서 사용하는 컴포넌트로 이동했습니다. ToDoList의 componentDidMount 내부에서 StatusBar.setBarStyle ('light-content', false)에 대한 호출을 추가했는데 성공했습니다! –

당신이 반응-기본 내비게이션을 사용하는 경우에 필요 당신의 Info.plist 파일 : <key>UIViewControllerBasedStatusBarAppearance</key> <string>YES</string>

2) 당신의 render() 기능의 첫 번째 줄에서, 예를 들면 : render(){ this.props.navigator.setStyle({ statusBarTextColorScheme: 'light' }); return ( <Login navigator={this.props.navigator}></Login> ); }

이 예제에서는 상태 표시 줄을 밝은 텍스트/단추/아이콘 색으로 변환합니다.

출처

2017-05-30 17:45:41

React Native에서 iOS 상태 표시 줄 배경색을 설정하는 방법은 무엇입니까?

답변

관련 문제