view.js

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

const ShoppItem = memo(({title, go }) => {
    return (
        <TouchableWithoutFeedback onPress={ () => go({ name: title }) } >
            <View style={styles.shoppItem} >
                <Image source={{uri: "https://images.b2bwings.com/10170109-22af-467b-8b18-008ec4d09724.jpg"}} style={styles.img} />
                <Text style={styles.shoppTitle}>{title}</Text>
            </View>    
        </TouchableWithoutFeedback>
    )
})

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 => (<ShoppItem title={e} go={go} key={e} />))}
            </ScrollView>    
        </SafeAreaView>
    )
}

export default Page