在 React Native 中将按钮设置在“固定”位置答案

【问题标题】：set button in position "fixed" in React Native在 React Native 中将按钮设置在“固定”位置
【发布时间】：2018-01-10 13:02:34
【问题描述】：

我想在 React Native 的右下角宽度固定位置设置按钮。

position: fixed 在 React Native 中不起作用，并且 ScrollView 中的 stickyHeaderIndices 方法不允许将元素定位在其他组件之上。

有人已经测试过这个功能吗？

【问题讨论】：

您能否详细说明或添加您想要实现的目标的草图？你只想要一个右下角的按钮，它位于滚动视图的顶部，并且不随滚动视图滚动吗？
是的，它“只是”右下角的一个按钮，位于多个组件上方。抱歉，我没有草图:(
您可以使用位于屏幕顶部的浮动按钮Help link。或者，如果您想使用自定义实现 use this link
谢谢，我去试试这个组件:)

标签： css react-native

【解决方案1】：

试试这个：

render() {
    return (
      <View style={{flex:1}}>
        <View style={{borderWidth:1,position:'absolute',bottom:0,alignSelf:'flex-end'}}>
           <Button
             title="Press"
             color="#841584"
             accessibilityLabel="Press"/>
        </View>
      </View>
    );
  }

输出：

【讨论】：

嗨 :) 绝对不是ScrollView 的解决方案，组件不会“固定”在底部
你想要滚动视图右下角的按钮。请使用您正在尝试的一些代码以及您的视图的屏幕截图/草图编辑您的问题。
@s-leg3ndz 我有一个View 包裹我的ScrollView 和带有position: 'absolute 的按钮在ScrollView 之外并且按预期工作。

【解决方案2】：

<View style={{flex: 1}}>
    <ScrollView style={{backgroundColor:'yellow'}}>
          <Text>body</Text>
    </ScrollView>
    <View><Text>sticky footer</Text></View>
</View>

【讨论】：

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
这些解决方案只适用于小案例，在实际应用中，如果有多个嵌套组件，这将不起作用
只有视图底部，不是屏幕底部。

【解决方案3】：

只需将组件放在滚动视图之外，并将其设置为绝对位置

【讨论】：

【解决方案4】：

如果你使用的是 Native Base，你可以只使用 Footer 组件

【讨论】：