react-native - 在 React native 中绝对位置在 ScrollView 中不起作用

Question

我试图在屏幕右下角放置一个按钮，如下图所示:

所以，基本上我有一个带有按钮的 ScrollView ，如下所示:

import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView,View,TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import { Header } from 'react-navigation';
import CreditCardList from '../Components/credit-cards/CreditCardList';
import Icon from 'react-native-vector-icons/Ionicons';
import Button from '../Components/common/Button';

// Styles
import styles from './Styles/CreditCardScreenStyle'
import CreditCardScreenStyle from './Styles/CreditCardScreenStyle';

class CreditCardScreen extends Component {

  render () {
    return (
        <ScrollView style={styles.container}>         
          <CreditCardList />
          <TouchableOpacity  style={CreditCardScreenStyle.buttonStyle}>
              <Icon name="md-add"  size={30} color="#01a699" />
          </TouchableOpacity>

        </ScrollView>
    )
  }
}

我的风格:

import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'

export default StyleSheet.create({
  ...ApplicationStyles.screen,
  container:{
    marginTop: 50,
    flex: 1,
    flexDirection: 'column'
  },
  buttonStyle:{
    width: 60,  
    height: 60,   
    borderRadius: 30,  
    alignSelf: 'flex-end',          
  //  backgroundColor: '#ee6e73',                                    
    position: 'absolute',                                          
    bottom: 0,                                                    
  //  right: 10, 
  }
})

问题是当按钮在 ScrollView 内时，绝对定位根本不起作用。但是...如果我将代码更改为如下所示:

import CreditCardScreenStyle from './Styles/CreditCardScreenStyle';

class CreditCardScreen extends Component {

  render () {
    return (

      <View style={styles.container}>
        <ScrollView >         
          <CreditCardList />
        </ScrollView>

        <TouchableOpacity  style={CreditCardScreenStyle.buttonStyle}>
              <Icon name="md-add"  size={30} color="#01a699" />
        </TouchableOpacity>

      </View>
    )
  }
}

然后就可以了!!什么？为什么？如何？我不明白为什么会这样，如果有任何相关信息，我将不胜感激。

Answer 1

这可能会带来不便，但这正是 RN 的工作方式。

基本上，ScrollView 内的任何内容(在 DOM/树中)都会随它滚动。为什么？因为<ScrollView>实际上是 <View> 的包装器实现触摸手势。

当您使用 position: absolute 时在 ScrollView 内的元素上，它获得相对于其第一个相对父级的绝对定位(就像在网络上一样)。因为我们在谈论 RN，它的第一个 relative parent 始终是其第一个父级(在 RN 中默认定位为 relative)。第一个 parent ，在本例中是 View包裹在ScrollView里面.

因此，“固定”它的唯一方法是将它带到 ScrollView 之外(在树中) ，因为这是在实际项目中实际完成的，也是我一直在做的。

干杯。