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

我建议使用“反应本机模式”。您不能使用position: 'absolute'使ScrollView中的元素变大但你可以做到将该元素放入模式包装中。

下面是两个示例。第一个无效，但是第二个完美。

第一种方法（无效）：

const app = () => {
  const [position, setPosition] = useState('relative')
  return(
    <ScrollView>
      <Element style={{position: position}}/>
      <Button
      title="make element fixed"
      onPress={()=> setPosition('absolute')}
      />
    </ScrollView>
  )
}

第二种方式（完美运行）：

const app = () => {
  const [isModalVisible, setIsModalVisible] = useState(false)
  return(
    <ScrollView>
      <Modal isModalVisible={isModalVisible}>
        <Element style={{width: '100%', height: '100%'}}/>
      </Modal>
      <Button
      title="make element fixed"
      onPress={()=> setIsModalVisible(true)}
      />
    </ScrollView>
  )
}

Answer 2

这可能不方便，但这只是RN的工作原理。

基本上，ScrollView（在DOM /树中）内部的所有内容都会随之滚动。为什么？因为<ScrollView>实际上是实现触摸手势的<View>的包装。

在ScrollView内的元素上使用position: absolute时，它相对于其第一个相对父元素（例如在网络上）获得绝对定位。由于我们在谈论RN，所以它的第一个relative父对象始终是它的第一个父对象（RN中的默认位置是relative）。第一父级，在这种情况下是包裹在View中的ScrollView。

因此，“修复”它的唯一方法是将其带到ScrollView的外面（在树中），因为这是实际项目中实际完成的工作，也是我一直以来所做的事情。

编码愉快。：）

位置绝对在React Native的ScrolView内部不起作用

2 个答案: