修改组件实例首页样式

Author: yaochuxia

example/examples/src/Home.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {View, Text, StyleSheet, ScrollView} from 'react-native';
+import {View, StyleSheet, ScrollView} from 'react-native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {stackPageData, Routes} from './routes';
-import {Button} from '@uiw/react-native';
+import {stackPageData} from './routes';
+import { Grid } from '@uiw/react-native';
 
 const styles = StyleSheet.create({
   block: {
@@ -12,60 +12,23 @@ const styles = StyleSheet.create({
 
 type ModalStackNavigation = StackNavigationProp<{}>;
 
-const Link = ({
-  navigation,
-  params,
-  to,
-  title,
-  description,
-}: {
-  to: string;
-  title: string;
-  description: string;
-  children?: JSX.Element;
-  params: Routes['params'];
-  navigation: ModalStackNavigation;
-}) => {
-  return (
-    <View
-      // eslint-disable-next-line react-native/no-inline-styles
-      style={{
-        borderBottomColor: '#CDCDCD',
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        flex: 1,
-      }}>
-      <Button
-        bordered={false}
-        textStyle={styles.block}
-        onPress={() => navigation.push(to as never, {...params} as never)}>
-        <View style={styles.block}>
-          <Text>{title || ''}</Text>
-          <View>
-            <Text style={{color: '#969696'}}>{description}</Text>
-          </View>
-        </View>
-      </Button>
-    </View>
-  );
-};
-
-export default ({navigation}: {navigation: ModalStackNavigation}) => {
+  export default ({ navigation }: { navigation: ModalStackNavigation }) => {
+  const uri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAllBMVEUAAAC/v7+qqqrHx8evr6/ExMS5ubmxsbGsrKysrKytra2pqam8vLy9vb2lpaXExMT////s7Oz8/Pz09PTu7u729vb5+fnp6enMzMzLy8vm5ub4+Pjj4+O3t7fx8fHb29vAwMDHx8ePj4/S0tLf39+rq6ulpaWSkpK7u7vY2NjR0dGnp6eenp6ampqysrLPz8+fn5+ioqKXtObzAAAAEHRSTlMA6wT4/e/f0KyZSy/z8mz4uKbH2gAAA6FJREFUSMellody2zAMhuXEGU6TVBgkbGp529np+79cKREUpbrxdfxnn7g+cYACkKku7m5vricPl4v5Yq5arWLJN14+TK5vbu8udLhCsyuHeY6QD0Q0rEHb765mA/DbJIw4j4XGybdIPV5q13lMC9NHnWvKpxhiAVBYPMX4ezffxSQnHmFoahFgkRpEmHCEMeWTdn8zygOnmAVhkxZZ1AImYdyOnvnJrrohrBiymF/3ZgGsYty1XV1kdy6MATKGnJRgoiAVuRRH/inhTe4uu9U1Q8MMmy0nOcdJ5bMwbEs9g9vsJg8yjq2UXxugdJYBtHKTXUeM64bO2c00bGP/dTbBIAIBERyIaFgTASHQyiS7hyC3KaHcQNSm2r2+vbwvBFRt91OjlfssXizZ+q2WjN3yqvXrcfWxmS/362lYGJfYjQm6zBah4InWbtRyy3UlGPaGvDxU6B8EvqVo9NgX2TwUGDosJzb7vQyPBHafxNSZ2zq9hXOdzYoJWM6Hyo5P0h4PkAcMwI5mAxOx/bvgGEOpfqBihoezoeSKLffWAA4xBLIvS8VywYR5RjFaix8PmDBs77+sa8XYDDA2ilVV9xbAiCF0cFUpZniASa6Yn0y5aICO8tMplkvCMGKbV8x7jqhbYSf8fI4YJgwUq46+FjmillIdK8UgYQUrtlvliaspUflqpxgXHbYiIhD/d77w+kG9oGkg1T5eiYhLImkbV2PsbUO96qcnStq8jbCwyFoX+TJPjhK8kpucv+gi66LfmwXF3peJMkQmcct3xcCeGmCxx55qDdBzuF8kA5yYW9bcUy3Wc7x2p+bOuQgYTJdKxctVBG65g4AVMMCoVgwOECjFlOMDKFbTbz+camcRilwxvS84rX79cPQztYrh51HM+DMtZPmGilkYOQUDiuX1iVPA44F7p2DGLghYZwP+8SJDjKdvADqbg+SCOtmyw9p94anDKwCDw7Pq8JJ7LduTga69rtaf0b3uIJyneAySe32AIPdc+r8D1bM6c23oulzvzB9S6BDnf1+HDifkUugYBCrT1OcCVd1QClQpLALQubDoHAGlsBiDMG3J0pMUthdzKhfw5LtLiUE4hnx0AgDNtnEQVZYQ5XyHf8jWasjXBAPBxgQDziQYFqwmGNmMlIrpDH+ZzihHs5A8+co4eeKUPEFKngKHIXnKvn0H++epmoWppoaP079JDL8//lsa+p9Jb0qx77sUexG0WmmhS7HvRyn2TxZ1zUyK+LY0AAAAAElFTkSuQmCC';
+    
+  const data = Array.from(stackPageData.map((_val, i) => {
+    return { icon: uri, text: _val.name }
+  }));
   return (
     <ScrollView>
       <View style={styles.block}>
-        {stackPageData.map((props, index) => {
-          return (
-            <View key={index}>
-              <Link
-                to={props.name as never}
-                navigation={navigation}
-                params={props.params}
-                title={props.params.title}
-                description={props.params.description}
-              />
-            </View>
-          );
-        })}
+         <Grid
+          data={data}
+          columns={3}
+          itemStyle={{ height: 100 }}
+          onPress={(data1,index) => {
+            navigation.push(data1.text as never,{...stackPageData[index].params} as never)
+          }}
+        />
       </View>
     </ScrollView>
   );