Scrollview не прокручивается при использовании flex-start и flex-end

Question

Я использую flexbox с моим scrollview в реагировать на натив, и кое-что о том, как это работает, портит прокрутку, она не будет прокручиваться.но если я удаляю все элементы с помощью flex-start, кажется, что он начинает прокручиваться, и я не могу сказать, почему

Я прошел через несколько других вопросов stackoverflow, и ни один из них не сработал, я нахожусь вмой ум заканчивается здесь

Компоненты:

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
  }

, а затем прочитайте эту статью

В ней подробно рассматриваются различия между CSS flexbox (где, по-видимому, большинство наших ожиданий в отношении поведения возникли) и гибкая коробка React Native, а именно то, что React Native интерпретирует flex: 1 как CSS-эквивалент:

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

Стоит также отметить, что ScrollView на самом деле не может бытьРассматривается так же, как View, упаковывающий кучу повторяющегося содержимого.Существует достаточно волосатых внутренних компонентов, унаследованных от FlatList до нативного класса List Android, чтобы скрыть любые связи, которые компонент имеет с View.