view.js

import React, { useState, useEffect } from 'react';
import {
  ScrollView,
  View,
  Text,
  Button
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context'
import { styles } from './style'


const Page: () => React$Node = ({ navigation }) => {

    const [ list, setList ] = useState([])

    useEffect(() => {
        setList( [ "荔枝-妃子笑 (演示路由跳转)", "荔枝-白糖婴 (演示路由跳转)" ])
    }, []) // effect只执行一次

    const go = params => navigation.navigate('shopping', params)
    
    return(
        <SafeAreaView style={styles.scrollView}>
            <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={{ flex: 1 }}>
                <View>
                    <Text style={ styles.h1 }>信巴迪-基础环境</Text>
                </View>
                {list.map(e => (
                    <Button title={e} onPress={ () => go({ name: e }) } key={e} />
                ))}
            </ScrollView>    
        </SafeAreaView>
    )
}

export default Page