React 네이티브 - NavigationBar 높이 및 컨테이너 내

Question

나는 navigationBar를 제어하고 반응 적으로 만들려고 노력해 왔습니다. 그러나 구성 요소의 컨테이너 높이와 위치를 제어 할 수는 없습니다.

심지어 가능합니까? 여기

내 코드입니다 : 여기

var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
     if (index >= 0) { 
      return (
       <View style={styles.navContainer}> 
        <TouchableHighlight 
         underlayColor="transparent" 
         onPress={() => { if (index > 0) { navigator.pop() } }}> 
         <Text style={ styles.leftNavButton }> 
          <Icon name="arrow-left" size={25} color="#900" /> 
         </Text> 
        </TouchableHighlight> 
       </View> 
      ) 
     } 
     else { return null } 
    }, 
    RightButton(route, navigator, index, navState) { 
     if (route.onPress) { 
      return (
       <View style={styles.navContainer}> 
        <TouchableHighlight 
         underlayColor="transparent" 
         onPress={() => route.onPress() }> 
         <Text style={ styles.rightNavButton }> 
          { route.rightText || <Icon name="arrow-right" size={25} color="#900" /> } 
         </Text> 
        </TouchableHighlight> 
       </View> 
      ) 
     } 
     else { return null } 
    }, 
    Title(route, navigator, index, navState) { 
     return (
      <View style={styles.navContainer}> 
       <Text style={ styles.title }>{route.title}</Text> 
      </View> 
     ) 
    } 
}; 

// Main component description 
class App extends Component { 

// not important stuff here 

    render() { 
     return (
      <Provider store={store}> 
       <Navigator 
        configureScene={this.configureScene} 
        initialRoute={{ component: Index, title: 'HOME', display: true}} 
        renderScene={ this.renderScene } 
        style={{backgroundColor: '#FFD800'}} 
        navigationBar={ 
         <Navigator.NavigationBar 
          style={ styles.navigator } 
          routeMapper={ NavigationBarRouteMapper } 
         /> 
        } 

       /> 
      </Provider> 
     ) 
    } 
} 

그리고는 스타일이 그것으로 무슨 : 내 예에서

var styles = StyleSheet.create({ 
    navigator: { 
     flex: 1, 
     backgroundColor: '#FFD800', 
     justifyContent: 'center', 
     alignItems: 'center', 
//  height: 64, 
    }, 
    navContainer: { 
     flex: 1, 
     flexDirection: 'column', 
     justifyContent: 'center', 
     alignItems: 'center', 
     borderWidth: 1, 
     borderColor: 'red', 
    }, 
    title: { 
     alignItems: 'center', 
    }, 
    leftNavButton: { 
     marginLeft: 12, 
    }, 
    rightNavButton: { 
     marginRight: 12, 
    }, 
}); 

, 내가 증가하려고하면 영향을주지 않습니다 navContainer의 높이를 변경 그것. 나는 그것을 줄일 수 있습니다 ...

Answer 1

Navigator에는 하드 코딩 된 여러 개의 크기가 있습니다. 가능성이 없습니다. 내가 찾은 유일한 해결책은 탐색 모음을 숨기고 장면에서 올바른 크기의 가짜 탐색 모음을 만드는 것입니다. 이것은 루트 레벨에서만 실제로 작동합니다.

새로운 NavigationExperimental api는 훨씬 더 융통성이 있으며 탐색 모음의 스타일을 원하는 크기로 쉽게 만들거나 사용자 지정 탐색 모음으로 바꿀 수 있습니다.