Почему flexDirection не работает, когда представление помещено в ScrollView для реагирования нативного?

Question

Почему flexDirection не работает, когда представление помещено в ScrollView для реагирования нативного?

Когда мое представление не помещается в представление прокрутки, параметр flexDirection: 'row' работает нормально.

export default class ProfileScreen extends Component {
render() {
    return (
            <View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
                <View style={{flex:0.2, backgroundColor: 'red'}} />
                <View style={{flex:0.8, backgroundColor: 'skyblue'}} />
                <View style={{flex:0.2, backgroundColor: 'steelblue'}} />
            </View>
    );
}

Когда он размещен в виде прокрутки, параметр flexDirection больше не работает.

export default class ProfileScreen extends Component {
render() {
    return (
        <ScrollView stickyHeaderIndices={[0]} >
            <View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
                <View style={{flex:0.2, backgroundColor: 'red'}} />
                <View style={{flex:0.8, backgroundColor: 'skyblue'}} />
                <View style={{flex:0.2, backgroundColor: 'steelblue'}} />
            </View>
            <View style={{flex: 1, flexDirection: 'row', height: 10}} />
            <View style={{flex: 1, flexDirection: 'row', height: 200, backgroundColor: 'skyblue'}} />
            <View style={{flex: 1, flexDirection: 'row', height: 10}} />
        </ScrollView>
    );
}
}

6

react-native scrollview flex-direction

Источник

user749803 07 мар '18 в 10:02

1 ответ

Другие вопросы по тегам react-native scrollview flex-direction

user5810541 14 май '19 в 12:25 2019-05-14 12:25 · Answer 1 · 2019-05-14 12:25

Я сталкивался с этой проблемой.

Подумайте, что происходит, stickyHeaderIndices перезаписывает некоторые из стилей в соответствующем представлении. Простая упаковка вида, который вы хотите привязать к другому, решит проблему, т.е.

...
  <ScrollView stickyHeaderIndices={[0]} >
    <View>
      <View style={{flex: 0.1, flexDirection: 'row', ... }}>
         <View style={{flex:0.2, backgroundColor: 'red'}} />
         <View style={{flex:0.8, backgroundColor: 'skyblue'}} />
         <View style={{flex:0.2, backgroundColor: 'steelblue'}} />
       </View>
    </View>
    
   ...
   </ScrollView>

user9611339 16 май '19 в 16:44 2019-05-16 16:44 · Answer 2 · 2019-05-16 16:44

Поместите flexDirection в contentContainerStyle, попробуйте так:

 <ScrollView style={{Your Style}} contentContainerStyle={{flexDirection:'row'}}>

   <View> 

  </View>

  <View> 

  </View>

</ScrollView>

8

Источник

user9611339 16 май '19 в 16:44

user749803 07 мар '18 в 10:45 2018-03-07 10:45 · Answer 3 · 2018-03-07 10:45

Этот код работает:

export default class ProfileScreen extends Component {
render() {
    return (
        <ScrollView stickyHeaderIndices={[0]} style={{flex:1}}>
            <View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
                <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
                    <View style={{flex:0.2, backgroundColor: 'red'}} />
                    <View style={{flex:0.8, backgroundColor: 'skyblue'}} />
                    <View style={{flex:0.2, backgroundColor: 'steelblue'}} />
                </View>
            </View>
            <View style={{flex: 1, flexDirection: 'row', height: 10}} />
            <View style={{flex: 1, flexDirection: 'row', height: 200, backgroundColor: 'skyblue'}} />
            <View style={{flex: 1, flexDirection: 'row', height: 10}} />
        </ScrollView>
    );
  }
}