使用 Stacknavigator 響應原生自定義組件

Question

我是本機反應的新手。 所以我對堆棧導航器的理解是，您可以通過在應用程序中定義路由來在視圖之間切換，如下所示：

 import React from 'react';
 import {createAppContainer} from 'react-navigation';
 import {createStackNavigator} from 'react-navigation-stack';

 import MenuScreen from "./views/MenuScreen";
 import HomeScreen from "./views/HomeScreen";
 import OrderScreen from "./views/OrderScreen";
 import PaymentScreen from "./views/PaymentScreen";
 import ReseedScreen from "./views/ReseedScreen";
 import ConfirmationScreen from "./views/ConfirmationScreen";


const MainNavigator = createStackNavigator({
    Home: {screen: HomeScreen},
    Menu: {screen: MenuScreen},
    Order: {screen: OrderScreen},
    Payment: {screen: PaymentScreen},
    Reseed: {screen: ReseedScreen},
    confirmation: {screen: ConfirmationScreen},
});

const App = createAppContainer(MainNavigator);

然后在 MenuScreen 文件中，如下所示：

import React from 'react';
import { Button } from 'react-native';

export default class MenuScreen extends React.Component {
static navigationOptions = {
    title: 'Welcome', // Add stuff at the top of page
};
render() {
    const {navigate} = this.props.navigation;
    return (
        <Button
            title="some title"
            onPress={() => navigate('Home', {name: 'home'})}
        />
    );
}
}

什么工作正常並創建一個按鈕，如果我點擊它，它會進入主屏幕並創建一個后退按鈕。 所以我想創建一個名為 navbar 的組件，我只是在其中放置了多個按鈕，這樣我就可以在我的所有屏幕中使用它。 這就是 navbar.js 的樣子。

import React, { Component } from 'react';
import {View, Button, Text} from 'react-native';

export default class NavBar extends Component {

static navigationOptions = {
    title: 'Welcome', // Add stuff at the top of page
};

render = () => {
    const {navigate} = this.props.navigation;

    return (
        <View>
            <Text>Nav bar</Text>
            <Button
                title="Go to home screen"
                onPress={() => navigate('Home', {name: 'home'})}
            />
            <Button
                title="Go to home screen"
                onPress={() => navigate('Menu', {name: 'menu'})}
            />
            <Button
                title="Go to home screen"
                onPress={() => navigate('Order', {name: 'Order'})}
            />
        </View>
    );
}
}

然后使用自定義 NavBar 組件更新 MenuScreen.js

import React from 'react';
import { Button, View } from 'react-native';
import NavBar from "./components/navbar";

export default class MenuScreen extends React.Component {
static navigationOptions = {
    title: 'Welcome', // Add stuff at the top of page
};
render() {
    const {navigate} = this.props.navigation;
    return (
        // <Button
        //     title="some title"
        //     onPress={() => navigate('Home', {name: 'home'})}
        // />
        <View>
            <NavBar></NavBar>
        </View>
    );
}
}

但 navbar.js 返回type error導航未定義

      7 |     title: 'Welcome', // Add stuff at the top of page
      8 | };
      9 | 
   > 10 | render = () => {
| ^  11 |     const {navigate} = this.props.navigation;
     12 | 
     13 |     return (

因此，如果我正確理解這一點，它會返回錯誤，因為app.js未定義navbar.js 。 但是navbar.js不是一個屏幕，而應該是一個組件，所以我是否需要將額外的東西導入到navbar.js或者是否不可能使用堆棧導航器來制作一個組件？

文件夾結構：

app.js
views/MenuScreen.js
views/components/NavBar.js

Answer 1

我建議您禁用默認導航選項，即頂部的后退按鈕並創建您自己的組件只是為了按照您的方式導航。

第一步是通過在堆棧導航器中添加以下代碼來禁用所有屏幕的標題：

defaultNavigationOptions: { headerShown: false, },

喜歡

const MainNavigator = createStackNavigator({
    Home: {screen: HomeScreen},
    Menu: {screen: MenuScreen},
    Order: {screen: OrderScreen},
    Payment: {screen: PaymentScreen},
    Reseed: {screen: ReseedScreen},
    confirmation: {screen: ConfirmationScreen},
},{
defaultNavigationOptions: {
      headerShown: false,
    },

});

現在您可以像創建 navbar.js 一樣創建您的組件。

現在假設你想在 HomeScreen.js 中使用它，所以首先你做

import Navbar from './NavBar.js';



    class HomeScreen extends Component {


    render(){
    return(
    <Navbar navigation={this.props.navigation} />
    // then rest of your code
    )
    }
    }

有了這個它應該可以工作，而且你有靈活性並且可以改變 navbar.js 的風格。 希望能幫助到你。 隨意懷疑

Answer 2

渲染應該是普通函數而不是箭頭函數。

render(){

}