* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
StackNavigation.js의 StackScreen headertitle 옵션에서 input value를 SearchPage 로 넘겨주고싶습니다
https://github.com/Jeff0327/tatoo_nine
작성한 코드 및 에러 메세지
import React,{useState,useEffect} from 'react';
import * as Linking from 'expo-linking';
import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet, Image,View, Text, ScrollView,TouchableOpacity,TextInput } from 'react-native';
import MainPage from '../pages/MainPage';
import SearchPage from '../pages/SearchPage';
import ImagePage from '../pages/ImagePage';
import { Fontisto } from "@expo/vector-icons";
import {useFonts} from "expo-font";
import {firebase_db} from "../firebaseConfig";
const Stack = createStackNavigator();
const link =()=>{
Linking.openURL('https://www.instagram.com/tattooist_nine/'); //인스타링크
}
const StackNavigator = () =>{
const [text,setText]=useState("");
const [onstate,onSetState] = useState([]);
useEffect(()=>{
setTimeout(()=>{
firebase_db.ref('/images').once('value').then((snapshot)=>{
let tip=snapshot.val();
onSetState(tip);
})
},1000)
},[text])
let dater=onstate.filter((e)=>{return e.idx==text})
const onChangeText=(text)=>{
setText(text);
return dater
}
const onClear=()=>{ //텍스트 clear function
setText("");
}
const [loaded] = useFonts({
//Only Eng support font
Alumni_Regular:require("../assets/font/AlumniSansPinstripe-Regular.ttf"),
Alumni_Italic:require("../assets/font/AlumniSansPinstripe-Italic.ttf"),
RobotoMono_Regular:require("../assets/font/RobotoMono-Regular.ttf"),
})
if(!loaded){
return null;
}
return (
<Stack.Navigator initialRouteName='MainPage'
screenOptions={({navigation})=>({
headerStyle: {
backgroundColor: "white",
borderBottomColor: "white",
shadowColor: "white",
},
headerTitleAlign:"Left",
headerTintColor: "#000",
headerBackTitleVisible: false,
headerTitle:()=>{
const dater= true;
return (
<View>
<TouchableOpacity
onPress={()=>{navigation.navigate("MainPage",{dater})}}
>
<Text style={styles.MainTitle}>TATOO NINE</Text>
</TouchableOpacity>
</View>)
},
headerRight:()=>(
<View style={{flexDirection:"row", marginHorizontal:10}}>
<TouchableOpacity onPress={()=>{navigation.navigate("SearchPage")}}>
<Fontisto style={styles.fontImg} name='search'/>
</TouchableOpacity>
<TouchableOpacity onPress={link}>
<Fontisto style={styles.fontImg} name='instagram'/>
</TouchableOpacity>
</View>
)
,
})}
>
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="ImagePage" component={ImagePage}/>
<Stack.Screen name="SearchPage" component={SearchPage} options={()=>({
headerTitle:()=>{
return (
<TextInput
style={styles.Input}
placeholder='타투검색'
value={text}
onChangeText={onChangeText}>
</TextInput>
)
},
headerRight:()=>{
return (
<TouchableOpacity
onPress={onClear}>
<Text>clear</Text>
</TouchableOpacity>
)
},
})
}
/>
</Stack.Navigator>
)
}
const styles=StyleSheet.create({
MainTitle:{
fontSize:20,
fontWeight:"500",
fontFamily:"RobotoMono_Regular",
},
fontImg:{
fontSize:30,
marginRight:5,
},
DetailTitle:{
fontSize:20,
},
Input:{
fontSize:15,
}
})
export default StackNavigator;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
import AsyncStorage from "@react-native-async-storage/async-storage";
import React ,{useState,useEffect} from "react";
import { StyleSheet, Image,View, Text, ScrollView,TouchableOpacity,TextInput } from 'react-native';
import {firebase_db} from "../firebaseConfig";
import ImagePage from "./ImagePage";
export default function SearchPage({navigation}){
const [onstate,onSetState] = useState([]);
// const [text, setText] = useState(["블랙워크"]);
const [filt,setFilt] = useState([""]);
const [result,setResult]=useState([]);
useEffect(()=>{
setTimeout(()=>{
firebase_db.ref('/images').once('value').then((snapshot)=>{
let tip=snapshot.val();
onSetState(tip);
setResult(onstate.filter((e)=>{return e.catagory=={text}}))
})
},1000)
},[setResult])
return(
<ScrollView style={styles.mainImgContainer} horizontal = {false} pagingEnabled ={true}>
{result.map((content, i)=>{
return(
<ImagePage
content={content}
key={i}
navigation={navigation}
/>
)
})}
</ScrollView>
)
}
const styles = StyleSheet.create({
fontstyle:{
fontSize:15,
},
})
