React native 反应本机：更改所选项目的颜色

我的抽屉导航是堆栈导航，这意味着我创建了一个自定义抽屉作为堆栈导航，如下所示：

class DrawerComponent extends React.Component {

  navigateToScreen = (route) => (
  () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
});


  render() {

    return (
          <ScrollView style={Styles.containerDrawer}>
            <View style={Styles.logoContainer}>
              <Image source={Images.logo}
                style={Styles.imageStyle}
                resizeMode={'contain'}
              />
            </View>

            <View style={Styles.blocksContainer}>
              <View style={Styles.firstBlock}>
                <TouchableOpacity
                  style={[Styles.buttonMenue, Styles.elevationButton, Styles.bgButton, Styles.centerContent]}
                  onPress= {this.navigateToScreen('Messages')}
                >
                  <IconMCI
                    name="message-text-outline" size={wp('10%')} color= '#000'
                    style={Styles.iconStyle}
                  />
                  <Text style={Styles.textButton}>الرسائل</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[Styles.buttonMenue, Styles.elevationButton, Styles.bgButton, Styles.centerContent]}
                  onPress= {this.navigateToScreen('Home')}
                >
                  <IconSI
                    name="home" size={wp('10%')} color= '#000'
                    style={Styles.iconStyle}
                  />
                  <Text style={Styles.textButton}>الإستقبال</Text>

                </TouchableOpacity>
              </View>

类抽屉组件扩展React.Component{
导航屏幕=（路线）=>(
() => {
const navigateAction=NavigationActions.navigate({
路由名称：路由
});
这个.props.navigation.dispatch（navigateAction）；
});
render（）{
返回(
الرسائل
الإستقبال

我的问题是无法更改所选项目的样式

这是我的抽屉，看起来像这样：

---

您可以使用状态来处理项的单击事件，并基于它更改类，下面提供了一个示例

    class DrawerComponent extends React.Component {

      state={
      clicked:true;
      }

      navigateToScreen = (route) => (
      () => {
        const navigateAction = NavigationActions.navigate({
          routeName: route
        });
        this.props.navigation.dispatch(navigateAction);
    });


      render() {

        return (
             ...

                <View style={Styles.blocksContainer}>
                  <View style={Styles.firstBlock}>
                    <TouchableOpacity
                      style={!this.state.clicked?[Styles.buttonMenue, Styles.elevationButton, Styles.bgButton, Styles.centerContent]:['custom-style']}
                      onPress= {()=>{
    this.setState({clicked:true})
    this.navigateToScreen('Messages')
    }}
                    >
 ...
                    </TouchableOpacity>

                  </View>

类抽屉组件扩展React.Component{
陈述={
点击：对；
}
导航屏幕=（路线）=>(
() => {
const navigateAction=NavigationActions.navigate({
路由名称：路由
});
这个.props.navigation.dispatch（navigateAction）；
});
render（）{
返回(
...
{
this.setState（{单击：true}）
此.navigateToScreen（'消息'）
}}
>
...

您可以使用状态来处理项的单击事件，并基于它更改类，下面提供了一个示例

    class DrawerComponent extends React.Component {

      state={
      clicked:true;
      }

      navigateToScreen = (route) => (
      () => {
        const navigateAction = NavigationActions.navigate({
          routeName: route
        });
        this.props.navigation.dispatch(navigateAction);
    });


      render() {

        return (
             ...

                <View style={Styles.blocksContainer}>
                  <View style={Styles.firstBlock}>
                    <TouchableOpacity
                      style={!this.state.clicked?[Styles.buttonMenue, Styles.elevationButton, Styles.bgButton, Styles.centerContent]:['custom-style']}
                      onPress= {()=>{
    this.setState({clicked:true})
    this.navigateToScreen('Messages')
    }}
                    >
 ...
                    </TouchableOpacity>

                  </View>

类抽屉组件扩展React.Component{
陈述={
点击：对；
}
导航屏幕=（路线）=>(
() => {
const navigateAction=NavigationActions.navigate({
路由名称：路由
});
这个.props.navigation.dispatch（navigateAction）；
});
render（）{
返回(
...
{
this.setState（{单击：true}）
此.navigateToScreen（'消息'）
}}
>
...

此.props.activeItemKey

在

呈现

方法中，将为您提供当前项目键，如

消息

，或者在您的情况下，

主页

…您可以使用它来相应地设置活动项目的样式

秒

如果可能，将StackNavigator在routeConfigs中呈现的屏幕移到抽屉中：

const DrawerNavigation = createDrawerNavigator({
  Home: { screen: HomeScreen },
  Screen2: { screen: StackScreen2 },
  Screen3: { screen: StackScreen3 },
});

---

this.props.activeItemKey

在

render

方法中，将为您提供当前项目键，如

Messages

，或者在您的情况下，

Home

。您可以使用它来相应地设置活动项目的样式

秒

如果可能，将StackNavigator在routeConfigs中呈现的屏幕移到抽屉中：

const DrawerNavigation = createDrawerNavigator({
  Home: { screen: HomeScreen },
  Screen2: { screen: StackScreen2 },
  Screen3: { screen: StackScreen3 },
});

---

这是更多信息：

import React, {Component} from 'react';
import { createStackNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';
import HomeStackNavigation from './HomeStackNavigation'
import Messages from '../Components/Messages/Messages';
import DrawerComponent from '../Components/Drawer/Drawer';
import {Platform, Dimensions} from 'react-native';
// import ScoreList from '../Components/ScoreList/ScoreList';

var width = Dimensions.get('window').width;

const DrawerNavigation = createDrawerNavigator({
    Home: { // entree (route name) : on peut la nommer comme on veut mais on prefere lui donner le meme nom que notre screen qu'on va afficher
      screen: HomeStackNavigation, // le screen qu'on va afficher IL DOIT ETRE UN STACK
    },
},
{
  drawerWidth: width*0.83,
  contentComponent: props =>
  {
    return(<DrawerComponent  {...props}/>)
  },
  drawerPosition: 'left',
},
);

export default createAppContainer(DrawerNavigation)

import React，{Component}来自'React'；
从“react navigation”导入{createStackNavigator、createDrawerNavigator、createAppContainer}；
从“./HomeStackNavigation”导入HomeStackNavigation
从“../Components/Messages/Messages”导入消息；
从“../Components/Drawer/Drawer”导入DrawerComponent；
从“react native”导入{Platform，Dimensions}；
//从“../Components/ScoreList/ScoreList”导入ScoreList；
var width=Dimensions.get（'window'）.width；
const pawernavigation=createpawernavigator({
主页：{//entre（路线名称）：在peut la nommer comme上，在veut mais上，在prefere lui donner le meme que notre屏幕上，在va afficher上
屏幕：HomeStackNavigation，//le screen qu'on va afficher IL DOIT ETRE UN STACK
},
},
{
抽屉宽度：宽度*0.83，
contentComponent:props=>
{
返回（）
},
抽屉位置：'左'，
},
);
导出默认createAppContainer（抽屉激活）

这是更多信息：

import React, {Component} from 'react';
import { createStackNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';
import HomeStackNavigation from './HomeStackNavigation'
import Messages from '../Components/Messages/Messages';
import DrawerComponent from '../Components/Drawer/Drawer';
import {Platform, Dimensions} from 'react-native';
// import ScoreList from '../Components/ScoreList/ScoreList';

var width = Dimensions.get('window').width;

const DrawerNavigation = createDrawerNavigator({
    Home: { // entree (route name) : on peut la nommer comme on veut mais on prefere lui donner le meme nom que notre screen qu'on va afficher
      screen: HomeStackNavigation, // le screen qu'on va afficher IL DOIT ETRE UN STACK
    },
},
{
  drawerWidth: width*0.83,
  contentComponent: props =>
  {
    return(<DrawerComponent  {...props}/>)
  },
  drawerPosition: 'left',
},
);

export default createAppContainer(DrawerNavigation)

import React，{Component}来自'React'；
从“react navigation”导入{createStackNavigator、createDrawerNavigator、createAppContainer}；
从“./HomeStackNavigation”导入HomeStackNavigation
从“../Components/Messages/Messages”导入消息；
从“../Components/Drawer/Drawer”导入DrawerComponent；
从“react native”导入{Platform，Dimensions}；
//从“../Components/ScoreList/ScoreList”导入ScoreList；
var width=Dimensions.get（'window'）.width；
const pawernavigation=createpawernavigator({
主页：{//entre（路线名称）：在peut la nommer comme上，在veut mais上，在prefere lui donner le meme que notre屏幕上，在va afficher上
屏幕：HomeStackNavigation，//le screen qu'on va afficher IL DOIT ETRE UN STACK
},
},
{
抽屉宽度：宽度*0.83，
contentComponent:props=>
{
返回（）
},
抽屉位置：'左'，
},
);
导出默认createAppContainer（抽屉激活）

我认为如果我在抽屉导航配置中有项目，它会起作用，但我有尤文one StackNavigation请分享更多关于导航设置的信息（特别是在哪里以及如何渲染抽屉）为了使图片更清晰…但如果这样做，我就无法从抽屉导航到屏幕，因为我的物品在costum抽屉中，它只是可触摸的不透明按钮您的

navigateToScreen

在您的代码中做得很好我想如果我在抽屉中有物品，它会工作，但我有Juvi one StackNavigation请分享更多关于您的信息ur导航设置（特别是在哪里以及如何渲染抽屉）为了使图片更清晰…但如果这样做，我就无法从抽屉导航到屏幕，因为我的物品在costum抽屉中，它只是可触摸的不透明按钮您的

navigateToScreen

在您的代码中做得非常好！。我答案中的代码将非常有效…因为您将

抽屉组件作为传递e> contentComponent

…尝试在渲染方法中为