1- import React , { useState } from 'react' ;
2- import { View , Text , Platform , StyleSheet } from 'react-native' ;
3- import { NavigationContainer , useNavigation , RouteProp } from '@react-navigation/native' ;
4- import { createStackNavigator } from '@react-navigation/stack' ;
5- import { RectButton , BorderlessButton } from 'react-native-gesture-handler' ;
6- import SearchLayout from 'react-navigation-addon-search-layout' ;
7- import { Ionicons } from '@expo/vector-icons' ;
1+ import React , { useState } from "react" ;
2+ import { View , Text , Platform , StyleSheet } from "react-native" ;
3+ import {
4+ NavigationContainer ,
5+ useNavigation ,
6+ RouteProp ,
7+ } from "@react-navigation/native" ;
8+ import { createStackNavigator } from "@react-navigation/stack" ;
9+ import { RectButton , BorderlessButton } from "react-native-gesture-handler" ;
10+ import SearchLayout from "react-navigation-addon-search-layout" ;
11+ import { Ionicons } from "@expo/vector-icons" ;
12+ import { StatusBar } from "expo-status-bar" ;
813
914type RootStackParamList = {
1015 Home : undefined ;
1116 Search : undefined ;
1217 Result : { text : string } ;
1318} ;
1419
15- type ResultScreenRouteProp = RouteProp < RootStackParamList , ' Result' > ;
20+ type ResultScreenRouteProp = RouteProp < RootStackParamList , " Result" > ;
1621
1722function HomeScreen ( ) {
1823 return (
19- < View style = { { flex : 1 , alignItems : ' center' , justifyContent : ' center' } } >
24+ < View style = { { flex : 1 , alignItems : " center" , justifyContent : " center" } } >
2025 < Text > Hello there!!!</ Text >
2126 </ View >
2227 ) ;
2328}
2429
25- function SearchScreen ( ) {
26-
27- const [ searchText , setSearchText ] = useState ( '' ) ;
30+ function SearchScreen ( ) {
31+ const [ searchText , setSearchText ] = useState ( "" ) ;
2832 const navigation = useNavigation ( ) ;
2933
30- const _handleQueryChange = ( searchText : string ) => {
34+ const _handleQueryChange = ( searchText : string ) => {
3135 setSearchText ( searchText ) ;
3236 } ;
3337
3438 const _executeSearch = ( ) => {
35- alert ( ' do search!' ) ;
39+ alert ( " do search!" ) ;
3640 } ;
3741
3842 return (
39- < SearchLayout
40- onChangeQuery = { _handleQueryChange }
41- onSubmit = { _executeSearch } >
43+ < SearchLayout onChangeQuery = { _handleQueryChange } onSubmit = { _executeSearch } >
4244 { searchText ? (
4345 < RectButton
4446 style = { {
4547 borderBottomWidth : StyleSheet . hairlineWidth ,
46- borderBottomColor : ' #eee' ,
48+ borderBottomColor : " #eee" ,
4749 paddingVertical : 20 ,
4850 paddingHorizontal : 15 ,
4951 } }
5052 onPress = { ( ) =>
51- navigation . navigate ( ' Result' , {
53+ navigation . navigate ( " Result" , {
5254 text : searchText ,
5355 } )
54- } >
56+ }
57+ >
5558 < Text style = { { fontSize : 14 } } > { searchText } !</ Text >
5659 </ RectButton >
5760 ) : null }
5861 </ SearchLayout >
5962 ) ;
6063}
6164
62- function ResultScreen ( props : ResultScreenRouteProp ) {
65+ function ResultScreen ( props : ResultScreenRouteProp ) {
6366 return (
6467 < View style = { styles . container } >
6568 < Text > { props . params . text } result!</ Text >
@@ -71,50 +74,52 @@ const Stack = createStackNavigator();
7174
7275export default function App ( ) {
7376 return (
74- < NavigationContainer >
75- < Stack . Navigator >
76- < Stack . Screen
77- name = "Home"
78- component = { HomeScreen }
79- options = { {
80- headerRight : ( props ) => {
81- const navigation = useNavigation ( ) ;
82- return (
83- < BorderlessButton
84- onPress = { ( ) => navigation . navigate ( 'Search' ) }
85- style = { { marginRight : 15 } } >
86- < Ionicons
87- name = "md-search"
88- size = { Platform . OS === 'ios' ? 22 : 25 }
89- color = { SearchLayout . DefaultTintColor }
90- />
91- </ BorderlessButton >
92- ) } ,
93- } }
94- />
95- < Stack . Screen
96- name = "Search"
97- component = { SearchScreen }
98- options = { {
99- headerShown : false ,
100- gestureEnabled : false ,
101- animationEnabled :false
102- } }
103- />
77+ < >
78+ < NavigationContainer >
79+ < Stack . Navigator >
80+ < Stack . Screen
81+ name = "Home"
82+ component = { HomeScreen }
83+ options = { {
84+ headerRight : ( props ) => {
85+ const navigation = useNavigation ( ) ;
86+ return (
87+ < BorderlessButton
88+ onPress = { ( ) => navigation . navigate ( "Search" ) }
89+ style = { { marginRight : 15 } }
90+ >
91+ < Ionicons
92+ name = "md-search"
93+ size = { Platform . OS === "ios" ? 22 : 25 }
94+ color = { SearchLayout . DefaultTintColor }
95+ />
96+ </ BorderlessButton >
97+ ) ;
98+ } ,
99+ } }
100+ />
101+ < Stack . Screen
102+ name = "Search"
103+ component = { SearchScreen }
104+ options = { {
105+ headerShown : false ,
106+ gestureEnabled : false ,
107+ animationEnabled : false ,
108+ } }
109+ />
104110
105- < Stack . Screen
106- name = "Result"
107- component = { ResultScreen }
108- />
109- </ Stack . Navigator >
110- </ NavigationContainer >
111+ < Stack . Screen name = "Result" component = { ResultScreen } />
112+ </ Stack . Navigator >
113+ </ NavigationContainer >
114+ < StatusBar style = "dark" />
115+ </ >
111116 ) ;
112117}
113118
114119const styles = StyleSheet . create ( {
115120 container : {
116121 flex : 1 ,
117- justifyContent : ' center' ,
118- alignItems : ' center'
119- }
120- } ) ;
122+ justifyContent : " center" ,
123+ alignItems : " center" ,
124+ } ,
125+ } ) ;
0 commit comments