ich das folgende Layout haben, und es muss scrollen, wenn Daten größer der Bildschirm ist:React-native Scroll nicht funktionieren
Image:
Code:
export default () => (
<Container hasNavBar={false}>
<View style={{flex: 1}}>
<View style={Styles.container}>
<View style={{
flex: 1, backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Area 1</Text>
</View>
<View style={{
flex: 2, backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Area 2</Text>
</View>
</View>
</View>
</Container>
);
Nach der Dokumentation von react-native für hinzufügen scroll ich mit Scroll Komponente erstellen müssen eine wraper meines Layout, aber wenn Scroll Komponente mein Layout brach hinzugefügt:
Image:
Code:
export default () => (
<Container hasNavBar={false}>
<ScrollView style={{flex: 1}}>
<View style={Styles.container}>
<View style={{
flex: 1, backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Area 1</Text>
</View>
<View style={{
flex: 2, backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Area 2</Text>
</View>
</View>
</ScrollView>
</Container>
);
Container Komponente
<View style={flex: 1}>
{this.props.children}
<DropdownAlert
closeInterval={10000}
updateStatusBar={false}
ref={(ref) => this.dropdown = ref}
onClose={() => null}/>
</View>
Wie löse ich es?
was ist 'C ontainer'? Bist du sicher, dass es die Top-Level-Komponente sein sollte? – vonovak
@VojtaNovak Ich habe den Containerkomponentencode hinzugefügt, es ist ein einfacher Wrapper für das Hinzufügen einer globalen Warnung in allen Seiten, die Ihr Kind es sein wird. – 1fabiopereira
Schauen Sie sich mit 'flexGrow: 1' anstelle von' flex: 1' an. Die 'flex'-Eigenschaft ist eine Abkürzung für' flexGrow' und 'flexShrink' und die letztere kann Ihr Design abschütteln. –