我的屏幕底部需要一个 <Text>，但所有 'solutions' 都不适合我 |移动应用程序|

Question

所以问题是；我想在屏幕底部显示一些文字。我找到了很多适用于他们的情况的解决方案，但这些解决方案不适用于我的情况，我不确定为什么。

这是我的 <View> 和 <Text> 位置的图片：

这是我将返回的代码：

<View>
  <View>
  {
    //other components
  }
  </View>
  <View style={styles.item1}>
    <Text 
      style={styles.skipText}
      onPress={() => navigation.navigate("Caregivers")}>
      Ga direct door naar de lijst!
    </Text>
  </View>
</View>

我尝试了多种方法，例如 position: 'absolute' 和 justifyContent: 'flex-end' 等。这是样式代码：

  skipText: {
    fontSize: widthPercentageToDP('3%'),
    fontFamily: 'monospace',
    textAlign: 'center',
    //marginTop: heightPercentageToDP('5%'),
    textDecorationLine: 'underline',
  },
  item1: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //This should work according to a source*
    bottom: 0, //This should work according to a source*
    justifyContent: 'flex-end',
    flex: 1,
  }

*来源：

提前致谢。

Answer 1

绝对定位将绝对定位元素，相对于其最近的祖先，它本身设置了 position，否则，它相对于 body。因此，根据您放置祖先元素的方式，您可能不会将它设置为 0px，相对于 window 的底部，但它可能相对于该祖先元素（它看起来像） .

相反，这样设置：

position:fixed;
bottom:0;

并阅读定位 here。

Answer 2

好的，我明白了。 Scott Marcus 的回答在浏览器中有效，但在我设备上的 expo 应用程序中无效。

解决办法是，View中的文字需要位置：'absolute'.

父视图需要 flex 1，位置：'relative'。

感谢所有（已删除的）答案！

我的屏幕底部需要一个 <Text>，但所有 'solutions' 都不适合我 |移动应用程序|

I need a <Text> on the bottom of my screen but all the 'solutions' won't work for me |Mobile App|

javascript

css

mobile

reactjs

react-native