Wie macht man einige Komponenten nicht scrollbar?

Question

Gibt es eine Möglichkeit, einige Komponenten im Inneren reagieren native nicht scrollbar zu machen? Wie wir sehen können, wird es automatisch scrollbar, wenn alle Komponenten nicht in einen Bildschirm passen. Wie verhindern wir, dass dieses Verhalten eintritt? Ist dies der Fall, wie bringen wir diese Komponenten in Blau um, die in ihren Positionen fixiert sind? Ich habe versucht, sie in den Kopf zu setzen, aber sie tauchen nicht auf.

 <Container> 
     <Header> 
     <Title>Form</Title> 

     <Button transparent onPress={this.props.openDrawer}> 
      <Icon name="ios-menu" /> 
     </Button> 
     </Header> 
     <Content> 
      <List> 
       <ListItem> 
       <InputGroup> 
        <Icon name="ios-search-outline" size={30} /> 
        <Input placeholder="What do you want to find? e.g. Restaurants" /> 
       </InputGroup> 
       </ListItem> 
       <ListItem> 
        <IconEntypo name="location-pin" size={30} /> 
        <Text >Binondo, Manila</Text> 
       </ListItem> 
      </List> 
      <XYZ_SearchList/> 
     </Content> 
    </Container> 

Answer 1

Sehr leicht ... Nicht sicher, ob Sie 3rd-Party-lib oder benutzerdefinierte Komponenten verwenden, aber ich nehme an List, Container und/oder Content Komponenten wickeln ScrollView - die standardmäßig blättern.

Extrahieren Sie Inhalte aus diesen Komponenten, legen Sie dann den Inhalt, der gescrollt werden soll, in die bildlauffähige Komponente. Siehe folgendes Codefragment - möglicherweise einige Änderungen erforderlich

<View> 
    <Header> 
    <Title>Form</Title> 
    <Button transparent onPress={this.props.openDrawer}> 
     <Icon name="ios-menu" /> 
    </Button> 
    </Header> 

    <InputGroup> 
    <Icon name="ios-search-outline" size={30} /> 
    <Input placeholder="What do you want to find? e.g. Restaurants" /> 
    </InputGroup> 
    <View> 
    <IconEntypo name="location-pin" size={30} /> 
    <Text >Binondo, Manila</Text> 
    </View> 

    <ScrollView> 
    <XYZ_SearchList/> 
    </ScrollView> 
</View>