滚动视图上的固定按钮

Question

我目前正在尝试在屏幕右下角的滚动视图上显示一个按钮，但它不起作用。当我滚动视图时，按钮会移动。我试着先插入按钮，但滚动视图在它上面。

class HomePage extends Component {
  loadUserItems() {
    this.props.loadUserItems();
  }
  constructor(props) {
    super(props);
    this.loadUserItems();
  }
  render() {
    return (
      <Container>
        <Content>
        <Header />
          <View>
            <ItemSquareDisplay
              items={this.props.items && this.props.items.length > 0
                ? this.props.items
                : ''} />
          </View>
          <Button style={styles.buttonStyle}>
            <Text style={styles.buttonTextStyle}>+</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}
// CONNECTE LES PROPS DE CETTE CLASSE AUX STATES DE REDUX
const mapStateToProps = state => {
  return {
    items: state.items.items,
  };
};
// PERMET A CETTE CLASSE DE LINKER LES PROPS AUX ACTIONS DE REDUX
export default connect(mapStateToProps, {loadUserItems}) ( HomePage );
const styles = {
  headerViewStyle : {
    alignItems: 'center',
    backgroundColor: '#cc003d',
    height: 90
  },
  headerImageStyle : {
    height: 80,
    width: 250,
    resizeMode: 'contain',
    marginTop: 7,
  },
  buttonStyle : {
    backgroundColor: '#fc454e',
    width: 66,
    height: 66,
    borderRadius: 33,
    justifyContent: 'center',
    alignItems:'center',
    position: 'absolute',
    bottom: 20,
    right: 20
  },
  buttonTextStyle : {
    color:'white',
    fontSize: 45,
    marginBottom: 6
  }
}

我尝试了 'fixed' 位置，但 react-native 不支持它。我希望按钮位于我的物品上方。

但是我不希望它在我滚动视图时移动。

Answer 1

好的，我明白了：

render() {
    return (
      <View>
      <Header />
        <ScrollView>
          <View>
            <ItemSquareDisplay
              items={this.props.items && this.props.items.length > 0
                ? this.props.items
                : ''} />
          </View>
        </ScrollView>
        <Button style={styles.buttonStyle}>
          <Text style={styles.buttonTextStyle}>+</Text>
        </Button>
      </View>
    );
  }

很明显，我需要从容器组件中提取按钮。谢谢大家的回答。

滚动视图上的固定按钮

Fixed button over a scrollview

css

fixed

react-native