如何使用 React-Native 在移动应用中实现类似 youtube 播放器的 Mini View

Question

我想在 React-Native 中实现一个迷你视图或浮动视图，在我们关闭它之前应该保持或打开它，如果我们导航到其他屏幕，它应该保持打开状态吗？

Answer 1

有 2 种方法可以执行。您可以按照此文档进行操作\n MiniView

\n\n

或者您可以像这样制作自己的自定义组件

\n\n

import\xc2\xa0React,\xc2\xa0{\xc2\xa0Component\xc2\xa0}\xc2\xa0from\xc2\xa0"react"\nimport\xc2\xa0{\xc2\xa0StatusBar,\xc2\xa0View,\xc2\xa0StyleSheet,\xc2\xa0Alert,\xc2\xa0FlatList,\xc2\xa0TextInput,\xc2\xa0Button,\xc2\xa0Image,\xc2\xa0SafeAreaView,\xc2\xa0Animated\xc2\xa0}\xc2\xa0from\xc2\xa0"react-native"\nimport\xc2\xa0{\xc2\xa0connect\xc2\xa0}\xc2\xa0from\xc2\xa0"react-redux"\nimport\xc2\xa0Alertable\xc2\xa0from\xc2\xa0"app/components/Alert/Alert"\nimport\xc2\xa0{\xc2\xa0AlertActions,\xc2\xa0NavigationActions,\xc2\xa0UserActions,\xc2\xa0OrderActions,\xc2\xa0}\xc2\xa0from\xc2\xa0"app/store/actions"\nimport\xc2\xa0Style\xc2\xa0from\xc2\xa0\'app/style\'\nimport\xc2\xa0handShake\xc2\xa0from\xc2\xa0\'app/assets/img/handShake.png\'\nimport\xc2\xa0route\xc2\xa0from\xc2\xa0\'app/assets/img/route.png\'\nimport\xc2\xa0endDay\xc2\xa0from\xc2\xa0\'app/assets/img/end-day.png\'\nimport\xc2\xa0{\xc2\xa0DashboardButton,\xc2\xa0Navigation\xc2\xa0}\xc2\xa0from\xc2\xa0\'app/components\'\nimport\xc2\xa0FA\xc2\xa0from\xc2\xa0\'react-native-vector-icons/FontAwesome5\'\nconst\xc2\xa0AnimatedIcon\xc2\xa0=\xc2\xa0Animated.createAnimatedComponent(FA)\n\nlet\xc2\xa0connectProps\xc2\xa0=\xc2\xa0{\n\xc2\xa0\xc2\xa0...AlertActions,\n\xc2\xa0\xc2\xa0...NavigationActions,\n\xc2\xa0\xc2\xa0...UserActions,\n\xc2\xa0\xc2\xa0...OrderActions,\n}\n\nlet\xc2\xa0connectState\xc2\xa0=\xc2\xa0state\xc2\xa0=>\xc2\xa0({\n\xc2\xa0\xc2\xa0menuStatus:\xc2\xa0state.User.meta,\n\xc2\xa0\xc2\xa0StartDayStatus:\xc2\xa0state.User.current,\n})\n\nlet\xc2\xa0enhancer\xc2\xa0=\xc2\xa0connect(\n\xc2\xa0\xc2\xa0connectState,\n\xc2\xa0\xc2\xa0connectProps\n)\n\nconst\xc2\xa0buttonsArr\xc2\xa0=\xc2\xa0[\n\xc2\xa0\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0id:\xc2\xa01,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0img:\xc2\xa0handShake,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0title:\xc2\xa0\'Start\xc2\xa0Day\'\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0id:\xc2\xa02,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0img:\xc2\xa0route,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0title:\xc2\xa0\'Planned\xc2\xa0Route\'\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0id:\xc2\xa03,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0img:\xc2\xa0endDay,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0title:\xc2\xa0\'End\xc2\xa0Day\'\n\xc2\xa0\xc2\xa0}\n]\n\nclass\xc2\xa0DashboardScreen\xc2\xa0extends\xc2\xa0Component\xc2\xa0{\n\n\xc2\xa0\xc2\xa0animVal\xc2\xa0=\xc2\xa0new\xc2\xa0Animated.Value(0);\n\xc2\xa0\xc2\xa0//\xc2\xa0initialize\xc2\xa0animated\xc2\xa0value\xc2\xa0to\xc2\xa0use\xc2\xa0for\xc2\xa0animation,\xc2\xa0whereas\xc2\xa0initial\xc2\xa0value\xc2\xa0is\xc2\xa0zero\n\n\n\xc2\xa0\xc2\xa0interpolateHeight\xc2\xa0=\xc2\xa0this.animVal.interpolate({\xc2\xa0outputRange:\xc2\xa0[\'100%\',\xc2\xa0\'24%\'],\xc2\xa0inputRange:\xc2\xa0[0,\xc2\xa01],\xc2\xa0})\n\n\xc2\xa0\xc2\xa0//\xc2\xa0initialize\xc2\xa0interpolation\xc2\xa0to\xc2\xa0control\xc2\xa0the\xc2\xa0output\xc2\xa0value\xc2\xa0that\xc2\xa0will\xc2\xa0be\xc2\xa0passed\xc2\xa0on\xc2\xa0styles\n\xc2\xa0\xc2\xa0//\xc2\xa0since\xc2\xa0we\xc2\xa0will\xc2\xa0animate\xc2\xa0both\xc2\xa0search\xc2\xa0bar\xc2\xa0and\xc2\xa0icon.\xc2\xa0we\xc2\xa0need\xc2\xa0to\xc2\xa0initialize\xc2\xa0both\xc2\xa0\n\xc2\xa0\xc2\xa0//\xc2\xa0on\xc2\xa0icon\xc2\xa0we\xc2\xa0will\xc2\xa0animate\xc2\xa0the\xc2\xa0scale\xc2\xa0whereas\xc2\xa0outputRange\xc2\xa0starts\xc2\xa0at\xc2\xa00\xc2\xa0end\xc2\xa0in\xc2\xa01\n\xc2\xa0\xc2\xa0//\xc2\xa0on\xc2\xa0search\xc2\xa0bar\xc2\xa0we\xc2\xa0will\xc2\xa0animate\xc2\xa0width.\xc2\xa0whereas\xc2\xa0outputRange\xc2\xa0starts\xc2\xa0at\xc2\xa0100%\xc2\xa0end\xc2\xa0in\xc2\xa090%\n\n\xc2\xa0\xc2\xa0animatedTransition\xc2\xa0=\xc2\xa0Animated.spring(this.animVal,\xc2\xa0{\xc2\xa0toValue:\xc2\xa01\xc2\xa0})\n\xc2\xa0\xc2\xa0//\xc2\xa0we\xc2\xa0use\xc2\xa0spring\xc2\xa0to\xc2\xa0make\xc2\xa0the\xc2\xa0animation\xc2\xa0bouncy\xc2\xa0.\xc2\xa0and\xc2\xa0it\xc2\xa0will\xc2\xa0animate\xc2\xa0to\xc2\xa0Value\xc2\xa01\n\n\xc2\xa0\xc2\xa0clickAnimate\xc2\xa0=\xc2\xa0()\xc2\xa0=>\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.animatedTransition.start()\n\xc2\xa0\xc2\xa0}\n\n\xc2\xa0\xc2\xa0componentDidMount()\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.props.saveNavigation(this.props.navigation)\n\xc2\xa0\xc2\xa0}\n\n\xc2\xa0\xc2\xa0buttonPressed(title)\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0let\xc2\xa0startDayStatus\xc2\xa0=\xc2\xa0this.props.StartDayStatus.toJS().startUserDay\n\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0switch\xc2\xa0(title)\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0case\xc2\xa0\'Planned\xc2\xa0Route\':\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.props.resetStates()\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0if\xc2\xa0(!startDayStatus)\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0alert("Start\xc2\xa0your\xc2\xa0day\xc2\xa0first!")\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0break\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.props.navigation.navigate("routeIndexScreen")\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0break\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0case\xc2\xa0\'Start\xc2\xa0Day\':\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.props.startUserDay(true)\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0if\xc2\xa0(startDayStatus)\xc2\xa0break\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.props.resetStates()\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.props.navigation.navigate("routeIndexScreen")\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0break\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0case\xc2\xa0\'End\xc2\xa0Day\':\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0if\xc2\xa0(startDayStatus)\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.askToEnd()\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0break\n\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0default:\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0this.props.startUserDay(false)\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0}\n\xc2\xa0\xc2\xa0}\n\n\xc2\xa0\xc2\xa0askToEnd()\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Alert.alert(\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0"Are\xc2\xa0you\xc2\xa0sure",\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0`You\xc2\xa0want\xc2\xa0to\xc2\xa0"End\xc2\xa0day"`,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0[\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0{\xc2\xa0text:\xc2\xa0"Yes",\xc2\xa0onPress:\xc2\xa0()\xc2\xa0=>\xc2\xa0this.props.startUserDay(false)\xc2\xa0},\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0text:\xc2\xa0"No",\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0style:\xc2\xa0"cancel"\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0],\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0{\xc2\xa0cancelable:\xc2\xa0false\xc2\xa0}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0);\n\xc2\xa0\xc2\xa0}\n\n\xc2\xa0\xc2\xa0renderItem({\xc2\xa0item\xc2\xa0})\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0let\xc2\xa0StartDayStatus\xc2\xa0=\xc2\xa0this.props.StartDayStatus.toJS().startUserDay\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0return\xc2\xa0(\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<DashboardButton\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0img={item.img}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0title={item.title}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0showOpacity={StartDayStatus\xc2\xa0&&\xc2\xa0item.title\xc2\xa0===\xc2\xa0\'Start\xc2\xa0Day\'\xc2\xa0||\xc2\xa0!StartDayStatus\xc2\xa0&&\xc2\xa0item.title\xc2\xa0===\xc2\xa0\'End\xc2\xa0Day\'}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0buttonPressed={this.buttonPressed.bind(this)}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0/>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0)\n\xc2\xa0\xc2\xa0}\n\n\xc2\xa0\xc2\xa0render()\xc2\xa0{\n\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0return\xc2\xa0(\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<Navigation\xc2\xa0navigation={this.props.navigation}\xc2\xa0style={{\xc2\xa0backgroundColor:\xc2\xa0\'#fff\'\xc2\xa0}}>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<StatusBar\xc2\xa0barStyle="light-content"\xc2\xa0/>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<Navigation.Top\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0menu\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0title={\'Dashboard\'}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0navigation={this.props.navigation}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0/>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<View\xc2\xa0style={styles.container}>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<Button\xc2\xa0title=\'animate\xc2\xa0icon\'\xc2\xa0onPress={this.clickAnimate}\xc2\xa0/>\n\n\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<View\xc2\xa0style={styles.search}>\n\n\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<Animated.View\xc2\xa0style={{\xc2\xa0height:\xc2\xa0this.interpolateHeight,\xc2\xa0}}>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<View\xc2\xa0style={{\xc2\xa0height:\xc2\xa0\'100%\',\xc2\xa0minHeight:\xc2\xa0200,\xc2\xa0width:\xc2\xa0400,\xc2\xa0backgroundColor:\xc2\xa0\'red\',\xc2\xa0marginBottom:\xc2\xa0200\xc2\xa0}}>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<Image\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0source={endDay}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0style={{\xc2\xa0height:\xc2\xa0\'100%\',\xc2\xa0width:\xc2\xa0\'100%\',resizeMode:\'contain\'\xc2\xa0}}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0/>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</View>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</Animated.View>\n\n\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</View>\n\n\n\n\n\n\n\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0{/*\xc2\xa0<View\xc2\xa0style={styles.buttonContainer}>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<FlatList\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0data={buttonsArr}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0showsVerticalScrollIndicator={false}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0renderItem={this.renderItem.bind(this)}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0keyExtractor={(item)\xc2\xa0=>\xc2\xa0item.id.toString()}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0contentContainerStyle={{\xc2\xa0paddingBottom:\xc2\xa050\xc2\xa0}}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0/>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</View>\xc2\xa0*/}\n\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</View>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</Navigation>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0)\n\xc2\xa0\xc2\xa0}\n}\n\nconst\xc2\xa0styles\xc2\xa0=\xc2\xa0StyleSheet.create({\n\xc2\xa0\xc2\xa0container:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0flex:\xc2\xa01,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0backgroundColor:\xc2\xa0\'gray\'\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0imageContainer:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0width:\xc2\xa0Style.DEVICE_WIDTH,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0height:\xc2\xa0Style.DEVICE_HEIGHT\xc2\xa0/\xc2\xa03.6,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0position:\xc2\xa0\'absolute\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0top:\xc2\xa00,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0flex:\xc2\xa01,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0justifyContent:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0alignContent:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0alignItems:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0menuButton:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0height:\xc2\xa050,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0width:\xc2\xa050,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0position:\xc2\xa0\'absolute\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0top:\xc2\xa050,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0left:\xc2\xa020,\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0menuIconStyle:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0height:\xc2\xa035,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0width:\xc2\xa035,\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0screenTitle:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0position:\xc2\xa0\'absolute\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0top:\xc2\xa050,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0color:\xc2\xa0\'white\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0fontSize:\xc2\xa024,\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0buttonContainer:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0position:\xc2\xa0\'absolute\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0top:\xc2\xa0\'9%\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0zIndex:\xc2\xa02,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0width:\xc2\xa0\'100%\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0justifyContent:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0alignItems:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0alignContent:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0backgroundColor:\xc2\xa0\'transparent\',\n\xc2\xa0\xc2\xa0},\n\n\xc2\xa0\xc2\xa0///////\n\xc2\xa0\xc2\xa0container:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0backgroundColor:\xc2\xa0\'#F79D42\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0//\xc2\xa0flex:\xc2\xa01,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0height:\xc2\xa0\'100%\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0paddingTop:\xc2\xa020,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0flexDirection:\xc2\xa0\'column\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0//\xc2\xa0justifyContent:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0alignItems:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0flex:\xc2\xa01,\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0input:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0width:\xc2\xa0\'100%\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0height:\xc2\xa0\'100%\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0backgroundColor:\xc2\xa0\'gray\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0textAlign:\xc2\xa0\'center\'\n\xc2\xa0\xc2\xa0},\n\xc2\xa0\xc2\xa0search:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0//flexDirection:\xc2\xa0\'row-reverse\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0width:\xc2\xa0\'90%\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0//\xc2\xa0\xc2\xa0height:\xc2\xa040,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0alignItems:\xc2\xa0\'center\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0justifyContent:\xc2\xa0\'flex-end\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0flex:\xc2\xa01,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0paddingBottom:\xc2\xa080\n\xc2\xa0\xc2\xa0}\n})\n\nexport\xc2\xa0default\xc2\xa0enhancer(Alertable(DashboardScreen))\n

\n