位置和底部在本机反应中不起作用

Question

<View styles = {style.container}>     <View styles = {style.card}>         <TouchableOpacity><Text>Button</Text></TouchableOpacity>     </View> </View> const styles = StyleSheet.create({     container: {         flexDirection: "column",         backgroundColor: "#61D9B7",         height: 70,     },     card: {         flexDirection: "row",         marginBottom: 10,         position: 'absolute',         bottom: 0,     }, }); 

我想修复页面底部的这部分，但它不起作用。有人可以帮我吗？

Answer 1

尝试一下

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

const Test = () => {
  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <View style={styles.card}>
          <TouchableOpacity>
            <Text>Button</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

export default Test;

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: "red",
  },
  container: {
    backgroundColor: "#61D9B7",
    height: 70,
    position: "absolute",
    bottom: 0,
    width: "100%",
  },
  card: {
    flexDirection: "row",
    marginBottom: 10,
  },
});