text: import React from 'react'
  import {
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
  } from 'react-native'
  import { connect } from 'react-redux'
  import { Button } from './components/Button'
  
  function App({ home, dispatch }) {
    const { text } = home
    const changetext = () => dispatch({ type: 'home/fetch' })
    const resetTitle = () => dispatch({ type: 'home/reset', payload: '123' })
    return (
      <View style={styles.container}>
        <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}
        >
          <Button onPress={resetTitle}>Reset</Button>
          <View style={styles.welcomeContainer}>
            <Text style={styles.welcomeText}>Hello {text}</Text>
          </View>
  
          <View style={styles.getStartedContainer}>
            <Text style={styles.getStartedText}>Get started by opening</Text>
  
            <View
              style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
            >
              <Text style={styles.codeHighlightText}>pages/home</Text>
            </View>
  
            <Text style={styles.getStartedText}>
              Change this text and your app will automatically reload.
            </Text>
          </View>
  
          <View style={styles.helpContainer}>
            <TouchableOpacity onPress={changetext} style={styles.helpLink}>
              <Text style={styles.helpLinkText}>Click Me！Change The Title.</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
  
        <View style={styles.tabBarInfoContainer}>
          <Text style={styles.tabBarInfoText}>
            This is a tab bar. You can edit it in:
          </Text>
  
          <View
            style={[styles.codeHighlightContainer, styles.navigationFilename]}
          >
            <Text style={styles.codeHighlightText}>
              navigation/MainTabNavigator.js
            </Text>
          </View>
        </View>
      </View>
    )
  }
  export default connect(({ home }) => ({ home }))(App)
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
    },
    developmentModeText: {
      marginBottom: 20,
      color: 'rgba(0,0,0,0.4)',
      fontSize: 14,
      lineHeight: 19,
      textAlign: 'center',
    },
    contentContainer: {
      paddingTop: 30,
    },
    welcomeContainer: {
      alignItems: 'center',
      marginTop: 40,
      marginBottom: 20,
    },
    welcomeText: {
      fontSize: 24,
      marginTop: 3,
      marginLeft: -10,
    },
    getStartedContainer: {
      alignItems: 'center',
      marginHorizontal: 50,
    },
    homeScreenFilename: {
      marginVertical: 7,
    },
    codeHighlightText: {
      color: 'rgba(96,100,109, 0.8)',
    },
    codeHighlightContainer: {
      backgroundColor: 'rgba(0,0,0,0.05)',
      borderRadius: 3,
      paddingHorizontal: 4,
    },
    getStartedText: {
      fontSize: 17,
      color: 'rgba(96,100,109, 1)',
      lineHeight: 24,
      textAlign: 'center',
    },
    tabBarInfoContainer: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      ...Platform.select({
        ios: {
          shadowColor: 'black',
          shadowOffset: { height: -3 },
          shadowOpacity: 0.1,
          shadowRadius: 3,
        },
        android: {
          elevation: 20,
        },
      }),
      alignItems: 'center',
      backgroundColor: '#fbfbfb',
      paddingVertical: 20,
    },
    tabBarInfoText: {
      fontSize: 17,
      color: 'rgba(96,100,109, 1)',
      textAlign: 'center',
    },
    navigationFilename: {
      marginTop: 5,
    },
    helpContainer: {
      marginTop: 15,
      alignItems: 'center',
    },
    helpLink: {
      paddingVertical: 15,
    },
    helpLinkText: {
      fontSize: 14,
      color: '#2e78b7',
    },
  })
  