使用 flex-start 和 flex-end 时滚动视图不滚动

Question

我在 React Native 中将 Flexbox 与我的滚动视图一起使用，关于它的工作原理的一些事情弄乱了滚动，它不会滚动。但是如果我使用 flex-start 删除所有元素，它似乎开始滚动，我不知道为什么

我已经解决了其他多个 Whosebug 问题，其中 none 个都有效，我已经无计可施了

组件：

class UserMessage extends Component{
  render(){
    return(
      <View style={styles.userMessage}>
        <Text style={styles.userText}>{this.props.text}</Text>
      </View>
    )
  }
}
class OtherMessage extends Component{
  render(){
    return(
      <View style={styles.otherMessage}>
          <Text style={styles.otherText}>{this.props.text}</Text>
      </View>
    )
  }
}

主要成分：

export default class MessagingMain extends Component {
  constructor(props){
    super(props);
    this._scrollview = React.createRef();
  }
  componentDidMount(){
    this._scrollview.current.scrollToEnd();
  }

  render(){
    return (
      <View style={styles.container}>
        <ScrollView ref={this._scrollview} contentContainerStyle={styles.scrolltainer}>
        <StatusBar hidden />
          <UserMessage text="haha" />
          <UserMessage text="haha wow this is so fun writing overly long messages with half an ounce of meaning really brings meaning to my short, sad, life, where i have no other meaning other than making this here messaging app where i need to write overly long placeholder text" />
          <OtherMessage text="epic gamer moment" />
          <UserMessage text="why is this cut off :(" />
          <UserMessage text=":(((((" />
          <OtherMessage text="hey man fuck off" />
          <UserMessage text=":(((((" />
          <UserMessage text=":(((((" />
          <OtherMessage text=":(((((" />
          <UserMessage text=":(((((" />
          <OtherMessage text=":(((((" />
          <UserMessage text=":(((((" />
          <OtherMessage text=":(((((" />
          <UserMessage text=":(((((" />
          <UserMessage text=":(((((" />
          <OtherMessage text=":(((((" />
          <UserMessage text=":(((((" />
          <OtherMessage text=":(((((" />
          <UserMessage text=":(((((" />
          <OtherMessage text=":(((((" />
          </ScrollView>
      </View>

    );
  }
}

样式：

const styles = StyleSheet.create({
  input: {
    backgroundColor: "#222222",
    height:"10%",
  },
  container: {
    backgroundColor: "#121212",
    flexGrow: 0,
    justifyContent: "space-between",
    flexDirection:'row',
  },
  scrolltainer:{
    //height:"90%",
  },
  userMessage: {
    backgroundColor: "#c3073f",
    minWidth: "20%",
    maxWidth: "52%",
    alignSelf: 'flex-end',
    margin: "5%",
    minHeight: "5%",
    borderRadius: 11,
    borderBottomRightRadius: 1,
    marginTop: "1%",
    marginBottom: "1%",
  },
  userText: {
    margin: "8%"

  },
  topBar: {
    height:"10%",
  },
  otherMessage: {
    backgroundColor: "#b3b3b3",
    minWidth: "20%",
    maxWidth: "52%",
    alignSelf: 'flex-start',
    margin: "5%",
    minHeight: "5%",
    borderRadius: 11,
    borderBottomLeftRadius: 1,
    marginTop: "1%",
    marginBottom: "1%",
  },
  otherText: {
    margin: "8%"

  },
});

Answer 1

这是一个臭名昭著的。尝试更新

scrolltainer:{
    //height:"90%",
  }

至

scrolltainer:{
    flexGrow: 1
  }

然后阅读this article

它深入探讨了 CSS flexbox（大概我们对行为的大部分期望都源于此）和 React Native flexbox 之间的差异——特别是 React Native 将 flex: 1 解释为 CSS 相当于：

flex-grow: 1
flex-shrink: 1
flex-basis: 0

还值得注意的是，不能真正将 ScrollView 视为包装了一堆重复内容的 View。从 FlatList 继承到 Android 原生 List class 的内部结构足够多，足以掩盖组件与视图之间的任何关系。

Answer 2

尝试将 style 更改为 contentContainerStyle

<ScrollView
    contentContainerStyle={{
      flex: 1,
      justifyContent: 'flex-end'
  }}>

有关详细信息，请查看此 article

使用 flex-start 和 flex-end 时滚动视图不滚动

Scrollview not scrolling when using flex-start and flex-end

javascript

user-interface

scrollview

reactjs

react-native