反應原生標題導航

Question

首先，我是韓國人。 所以我英語不好。 請理解我。

無論如何，如果我觸摸標題的“放大鏡”圖標，我想進入詳細屏幕（如“進入詳細屏幕”按鈕）

但是我不知道怎么...

請幫我！

如果您上傳完整代碼，我很高興！ 請上傳完整代碼！

感謝您的閱讀！

這是 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>
  );
};

我希望它對你有幫助！