我试着为我的react本地笔记应用做一个底部导航栏，但是它只是停留在顶部，我试过自动边距，自我对齐，绝对/相对定位，但没有成功。
主要代码：

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight,
    flexGrow: 1,
    flexShrink: 1,
    padding: 10,
    backgroundColor: theme.colors.background,
    display: "flex",
    position: "relative",
  },
  title: {
    fontSize: theme.fontSizes.title,
    fontWeight: theme.fontWeights.bold,
  },
  appbar: {
    position: "absolute",
    bottom: 0,
  },
})
...
    <View style={styles.container}>
      <Text style={styles.title}>Notes</Text>
      <Routes>
        <Route path="/" element={<NoteList notes={notes} />} />
        <Route path="*" element={<Navigate to="/" replace />} />
        <Route path="/:id" element={<Note {...note} />} />
      </Routes>
      <AppBar addNote={addNote} />
    </View>

应用程序栏组件：

import { View, StyleSheet, Pressable, Text } from "react-native"

const styles = StyleSheet.create({
  container: {},
})

const AppBar = ({ addNote }) => {
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => addNote({ id: "9", title: "Hii", body: "new note" })}
      >
        <Text style={{ textAlign: "center", fontSize: 30 }}>Add</Text>
      </Pressable>
    </View>
  )
}

export default AppBar