反应原生标头导航

Question

首先，我是韩国人。所以我不擅长英语。请理解我。

无论如何，如果我触摸标题的"放大镜"图标，我想点击Detail Screen(就像' go Detail Screen'按钮)

但是我不知道怎么…

请帮帮我!

我很高兴如果你上传完整的代码!请上传完整代码!

感谢您的阅读!

这是App.js

import * as React from 'react';
import { View, Text, Button, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar } from "expo-status-bar";
import { TouchableOpacity } from 'react-native-gesture-handler';
let search = require('./search.png');
import MainScreen from './MainScreen';
import DetailScreen from './DetailScreen';

const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<StatusBar style="auto" />
<Stack.Navigator initialRouteName="MAIN">
<Stack.Screen name="MAIN" component={MainScreen}
options={{
title: '',
headerLeft:()=>
<View>
<Text style={{fontSize:18,marginLeft:30,marginTop:-5,fontWeight:'600'}}>성북구</Text>
</View>,
headerRight:()=>
<TouchableOpacity>
<Image source={search} style={{height: 20, width: 20,marginRight:20,}}/>
</TouchableOpacity>
}}/>
<Stack.Screen name="DETAIL" component={DetailScreen} 
options={{
title: '상세화면'
}}/>
</Stack.Navigator>
</NavigationContainer>

);

}
export default App;

这是MainScreen.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export default class MainScreen extends Component {
render() {
return (

<View>
<Text style={{fontSize:30}}>Main Screen</Text>
<Button onPress={() => this.goMainScreen()} title='Go Detail Screen'/>
</View>
);
}
goMainScreen(){
// DetailScreen으로 화면 이동
this.props.navigation.navigate('DETAIL');
}
}

这是DetailScreen.js

import React, { Component } from 'react';
import { View, Text, } from 'react-native';
export default class DetailScreen extends Component {
render() {
return (
<View>
<Text style={{fontSize:30}}>Detail Screen</Text>
</View>
);
}
}

Answer 1

您可以为任何屏幕或堆栈屏幕创建自定义标题，这种方式比您的流更简单，更灵活。

例如:

const RootStack = createNativeStackNavigator();
const RootNavigator = () => {
return (
<RootStack.Navigator initialRouteName={'Main'}>
<RootStack.Screen
name={'Main'}
component={MainScreen}
options={{
header: () => <MainHeader />, // This is your custom header
}}
/>
</RootStack.Navigator>
);
};

我希望它能帮助你!