固定滚动视图上的按钮

时间:2018-03-27 09:47:32

标签: css react-native fixed

我目前正在尝试在屏幕右下角显示一个按钮,通过滚动视图,但它不起作用。滚动视图时按钮会移动。我试图先插入按钮,但是滚动视图已经结束了。

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
  }
}

我尝试了'固定'位置,但反应原生不支持它。 我希望按钮超过我的项目。 Output

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

1 个答案:

答案 0 :(得分:6)

好的,我明白了:

urls.py

很明显,我需要从Container组件中提取我的按钮。 谢谢你的答案。