質問: StyleSheet.create({ container: { alignItems: 'center', backgroundColor: '#ecf0f1', padding: 20, }, titulo: { textAlign: 'center', fontWeight: 'bold', }, quadro: { backgroundColor: 'yellow', height: 300, marginTop: 30, width: 200, borderWidth: 3, }, item: { height: 50, backgroundColor: 'red', margin: 5, borderWidth: 1, justifyContent: 'center', alignItems: 'center', }, }); ```
回答: Primeiro, vou atribuir o estilo do `container` para uma `View` que vai conter todo o código, para evitar de lançar erro (pelo menos nos meus testes) e vamos ativar o `scrollEnabled`. Como fica: ``` return ( // ... ) ``` Agora vem o seguinte detalhe, isto que voce tenta fazer é o que chamamos de *Nested ScrollView* (`ScrollView` Aninhada) e neste caso devemos observar o seguinte, por padrão, o aninhamento de `ScrollView`s é ativado automaticamente no `iOS`, mas para tê-lo no `Android`, temos que definir os **props** `nestedScrollEnabled` como `true`. Como fica: ``` import * as React from 'react'; import { Text, View, StyleSheet, ScrollView } from 'react-native'; export default function App() { return ( QUADRO 1 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 QUADRO 2 Item 1 Item 2 Item 3 Item Item Item QUADRO 3 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 ); } const styles = StyleSheet.create({ container: { alignItems: 'center', backgroundColor: '#ecf0f1', padding: 20 }, titulo: { textAlign: 'center', fontWeight: 'bold' }, quadro: { backgroundColor: 'yellow', height: 300, marginTop: 30, width: 200, borderWidth: 3 }, item: { height: 50, backgroundColor: 'red', margin: 5, borderWidth: 1, justifyContent: 'center', alignItems: 'center' } }); ``` Veja como fica no snack.expo.io. Se possuir o EXPO, escaneie o QRCode com o aplicativo !inserir a descrição da imagem aqui