Reactjs React Native：绝对底部文本输入

我一辈子都不能让这个文本输入显示在屏幕的底部

这是我的基本设置：

class Chat extends Component {
  render() {
    return (
        <View style={styles.container}>
          <View style={styles.content}>
            <Text>Test</Text>
          </View>
          <View style={styles.footer}>
            <Text>Meow</Text>
          </View>
        </View>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5",
    ...Platform.select({
      ios: { paddingTop: 30 }
    }),
  },
  content: {
    flex: 1,
  },
  footer: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding:10,
    position: 'absolute',
    flex:0.1,
    left: 0,
    right: 0,
    bottom: 0,
  }
}

类聊天扩展组件{
render（）{
返回(
试验
喵
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“F5”，
…平台。选择({
ios:{paddingTop:30}
}),
},
内容：{
弹性：1，
},
页脚：{
边框宽度：1，
边框颜色：“#ccc”，
填充：10，
位置：'绝对'，
弹性系数：0.1，
左:0,，
右:0,，
底部：0，
}
}

我还尝试将页脚的flex属性切换到固定高度：80，但仍然得到相同的输出。如何使页脚位于底部

还要记住，这是使用React导航，这是一个StackNavigator屏幕-不确定这是否重要

---

样式设置有问题。您需要容器的flex为1，然后在容器内部有两个视图，分别为flex:1和flex:0.1，因此似乎无法使用此配置，让我们尝试其他方法：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5",
    ...Platform.select({
      ios: { paddingTop: 30 }
    }),
  },
  content: {
    flex: 0.8,
  },
  footer: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding:10,
    flex:0.2,
  }
}

基本上，我将屏幕划分为8:2的比例，总共是1，即8部分内容视图和2部分页脚视图

---

干杯：）

啊，这是因为我使用的是ShouteUI。如果我将文本和视图组件导入移回react native，它似乎可以工作…在使用Shoute UI工具包时，您应该检查文本组件的文档和视图组件的文档。