Question

这是关于React Native + React Navigation问题。

在我的项目中，我需要一个顶级的DrawerNavigator，以便在所有屏幕中共享标题，这样当抽屉打开时它就会停留在标题的顶部。我到目前为止提出的最佳解决方案是DrawerNavigator，它的所有路由都是StackNavigator，具有相同的头部配置，但这看起来似乎很丑陋，丑陋和非性能，因为我认为头部会重新渲染每次。有没有人做过类似的事情？提前谢谢。

Router.js

export const RegisterStack = StackNavigator(
    {
        Register: {screen: Register},
    },
    {
        mode: 'modal',
        navigationOptions: {
            title: 'My title',
        }
    }
);

export const HistoryStack = StackNavigator(
    {
        History: {screen: History},
    },
    {
        mode: 'modal',
        navigationOptions: {
            title: 'My title',
        }
    }
);

export const FavoritesStack = StackNavigator(
    {
        Favorites: {screen: Favorites},
    },
    {
        mode: 'modal',
        navigationOptions: {
            title: 'My title',
        }
    }
);

export const CardsStack = StackNavigator(
    {
        Cards: {screen: Cards},
    },
    {
        mode: 'modal',
        navigationOptions: {
            title: 'My title',
        }
    }
);

export const AgreementStack = StackNavigator(
    {
        Agreement: {screen: Agreement},
    },
    {
        mode: 'modal',
        navigationOptions: {
            title: 'My title',
        }
    }
);

export const createRootNavigator = () => {

    return DrawerNavigator({
        Register: {
            screen: RegisterStack,
        },
        History: {
            screen: HistoryStack,
        },
        Favorites: {
            screen: FavoritesStack,
        },
        Cards: {
            screen: CardsStack
        },
        Agreement: {
            screen: AgreementStack,
        },
    })

};

App.js

export default class App extends Component {

    render() {

        const Layout = createRootNavigator();

        return (
            <Provider store={store}>
                <Layout style={styles.main}/>
            </Provider>
        );
    }
}

Answer 1

好吧，我实际上已经开始工作了，您要做的是在抽屉式导航器内创建一个stackNavigator，抽屉式导航器能够在stackNavigator内看到并在stacknavigator屏幕之间导航。使用contentComponent。完成此操作后，您可以将分片标头放入stackNavigator中。

const PrimaryDrawer = createDrawerNavigator({
  PrimaryStack,
}, {
  contentComponent: PrimaryDrawerContentComponent,
})

const PrimaryStack = createStackNavigator({
  Feed,
  Home,
}, {
})

import _ from 'lodash'
export default class PrimaryDrawerContentComponent extends Component {
  render() {
    const { navigation } = this.props
    return (
      <FlatList
        data={_.keys(navigation.router.childRouters.PrimaryStack.childRouters)}
          renderItem={({ item, index }) => (
            <DrawerItem
              routeName={item}
              navigate={navigation.navigate}
              icon={icons[index] ? icons[index] : null}
            />

      )}
      keyExtractor={item => item.key}
    />
  )
 }
}


const DrawerItem = ({ routeName, navigate, icon }) => {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={() => { navigate(routeName) }}
    >
      <Image
        source={icon}
      />
      <Text style={styles.text}>{routeName}</Text>
    </TouchableOpacity>
  )
}

抽屉导航器，所有孩子都有共享标头

1 个答案: