React Native：绝对底部文本输入

Question

对于我的生活，我无法将此文本输入显示在屏幕底部。

这是我的基本设置：

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,
  }
}

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

另请注意，这是使用React Navigation，这是一个StackNavigator屏幕 - 不确定是否重要。

Answer 1

造型有问题..你需要容器​​的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个页脚视图。

干杯：）