Question

我试图将我的bottomnavbar放置在屏幕底部，但是不能正常工作吗？我一直在尝试将位置设置为绝对位置，然后设置为bottom：0，但是如果我在app.js组件上执行此操作，或者直接在bottomNavbar.js组件的样式表中执行此操作，则没有任何作用。

这是我的app.js组件：

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

class BottomNavbar extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>insights</Text>
        <Text>Incidents</Text>
        <Text>PLUS</Text>
        <Text>Team Alerts</Text>
        <Text>More</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'grey',
    position: 'absolute',
    bottom: 0,
  },
});
export default BottomNavbar;

这是我的BottomNavbar组件：

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

class BottomNavbar extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>insights</Text>
        <Text>Incidents</Text>
        <Text>PLUS</Text>
        <Text>Team Alerts</Text>
        <Text>More</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'grey',
    position: 'absolute',
    bottom: 0,
  },
});
export default BottomNavbar;

现在，我希望bottomnavbar出现在手机屏幕的底部，但是我不知道该怎么做。

Answer 1

尝试这个

import { AppRegistry } from 'react-native';
import React, { Component } from 'react';

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

class BottomNavbar extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>insights</Text>
        <Text>Incidents</Text>
        <Text>PLUS</Text>
        <Text>Team Alerts</Text>
        <Text>More</Text>
      </View>
    );
  }
}

class App extends Component {
  render() {
    return (
      <View style={styles.appContainer}>
        {/* ...other components */}
        <BottomNavbar />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'grey',
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: 80,
  },
});

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

如何在本机反应中放置子组件

1 个答案: