Question

我正在尝试列出一个按钮，但是如果我尝试按一个按钮然后是一个类似的列表：

return (
    <View style={styles.mainContainer}>
        <View>
            <TouchableOpacity style={styles.Button} onPress={() => this.props.navigate(1)}>
                {buttonText}
            </TouchableOpacity>
        </View>
        <ScrollView>
            <View style={{ height: 250, backgroundColor: 'red' }}>
            </View>
            <View style={{ height: 250, backgroundColor: 'blue' }}>
            </View>
            <View style={{ height: 250, backgroundColor: 'green' }}>
            </View>
        </ScrollView>
    </View>
);

您看到绿色未完全显示：

如果没有按钮，则不会发生这种情况。

如果我搬家

        <View>
            <TouchableOpacity style={styles.Button} onPress={() => this.props.navigate(1)}>
                {buttonText}
            </TouchableOpacity>
        </View>

在ScrollView之后，我没有看到按钮。

总而言之，我希望将按钮粘贴到底部，同时让滚动视图中的每个元素都完全显示出来。怎么办呢？

这是BTW按钮的样式：

Button: {
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    marginTop: 5,
    margin: 3,
    backgroundColor: '#4267b2',
    borderColor: '#ffffff',
    alignItems: 'center'
}

Answer 1

您可以使用position: absolute粘贴按钮视图，设置其高度并在滚动视图上添加此高度的边距底部。

<强>渲染

return (
    <View style={styles.mainContainer}>
        <ScrollView style={styles.list}>
            <View style={{ height: 250, backgroundColor: 'red' }}>
            </View>
            <View style={{ height: 250, backgroundColor: 'blue' }}>
            </View>
            <View style={{ height: 250, backgroundColor: 'green' }}>
            </View>
        </ScrollView>
        <View style={styles.fixedBottom}>
            <TouchableOpacity style={styles.Button} onPress={() => this.props.navigate(1)}>
                {buttonText}
            </TouchableOpacity>
        </View>
    </View>
);

<强>风格

...
fixedBottom: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 50, // <== the height on your view containing the button
    backgroundColor: 'gray',
  },
list: {
    alignSelf: 'stretch',
    flex: 1,
    marginBottom: 50, // <== here the margin to see the full list
},
...

Here is a live demo

Answer 2

他实现这一目标的正确方法是使用flex

这是1：10弹性体与标题比率的示例

 render() {
 return (
  <View style={styles.mainContainer}>
    <View style={styles.bodyContainer}>
      <ScrollView >
        <View style={{ height: 250, backgroundColor: 'red' }}>
        </View>
        <View style={{ height: 250, backgroundColor: 'blue' }}>
        </View>
        <View style={{ height: 250, backgroundColor: 'green' }}>
        </View>
      </ScrollView>
    </View>
    <View style={styles.headerContainer}>
      <Button style={{ backgroundColor: 'blue', alignSelf:'center' }}
        title="THIS IS A BUTTON" />
    </View>
  </View>
   );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    flexDirection: 'column'
  },
   headerContainer: {
    flex: 1,
  },
  bodyContainer: {
    flex: 10
  }
});

带有ScrollView的粘滞按钮不会显示完整列表

2 个答案: