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更加灵活，您可以轻松地将导航栏设置为任意大小，或者使用自定义导航栏替换它。

Answer 2

首先我们需要导入

import { Dimensions , StatusBar } from 'react-native';

WindowHeight = Dimensions.get('window').height。 ScreenHeight = Dimensions.get('screen').height。 StatusBarHeight = StatusBar.currentHeight

WindowHeight = ScreenHeight - NavigationBarHeight

当我们要在页面底部实现浮动按钮时，将 WindowHeight 设置为高度，并将bottom : StatusBar.currentHeight设置为子元素。

当我们没有 NavigationBar 时， WindowHeight = ScreenHeight

React Native - NavigationBar高度和容器内

2 个答案: