如何在使用本机基础 ui 套件的本机反应中以不同颜色显示列表中的选定项目？

Question

我想在我试过 TouchableOpacity underlay 的不同背景 color.For 中显示侧边栏内容。但那不是我想要的 for.After 给 TouchableOpacity ，它只会改变文本的颜色，而不是整个列表 background.How 我是否更改列表项背景颜色，因为我使用的是原生基础 ui kit.Please help.Is 有什么方法可以做到这一点吗？这就是侧边栏的样子 like.I已经做了一些事情，比如 following.Setting pressStatus 在 onPresList 中是真的，如果是真的，改变背景color.But 导航到 route 不是 working.There 是一个错误

https://i.stack.imgur.com/w9YiR.png

如何更改 onPress 的背景颜色？以下是我的代码。

已更新

import React, { Component } from "react";
import { Image, FlatList } from "react-native";
import {
  Content,
  Text,
  List,
  ListItem,
  Icon,
  Container,
  Left,
  Right,
  Badge,
  Thumbnail
} from "native-base";
import styles from "./style";

const drawerCover = require("../../imgs/quwait.jpg");

const datas = [
  {
    name: "Dashboard",
    route: "Anatomy",
    icon: require("../../imgs/dashboard.png"),

  },
  {
    name: "Companies",
    route: "Header",
    icon: require("../../imgs/enterprise1.png"),
  },
  {
    name: "Company Admin",
    route: "Footer",
    icon: require("../../imgs/icon1.png"),

  },
  {
    name: "Employee",
    route: "NHBadge",
    icon: require("../../imgs/businessman1.png"),

  },
  {
    name: "Employs",
    route: "NHButton",
    icon: require("../../imgs/employee1.png"),

  },
  {
    name: "Announcement",
    route: "NHCard",
    icon: require("../../imgs/megaphone1.png"),

  },
  {
    name: "Holiday",
    route: "Check",
    icon:  require("../../imgs/sun-umbrella1.png"),

  },
  {
    name: "Accounting Report",
    route: "NHTypography",
    icon: require("../../imgs/accounting1.png"),

  },
  {
    name: "Invoice",
    route: "NHCheckbox",
    icon: require('../../imgs/approve-invoice1.png'),

  },
  {
    name: "Settings",
    route: "NHDatePicker",
    icon: require('../../imgs/settings1.png'),
  },
  {
    name: "Safety Phone Numbers",
    route: "NHThumbnail",
    icon: "user",

  },
  {
    name: "NBK",
    route: "NHDeckSwiper",
    icon: "swap",


  },
  {
    name: "ABK",
    route: "NHFab",
    icon: "help-buoy",

  },
  {
    name: "CBK",
    route: "NHForm",
    icon: "call",

  },
  {
    name: "Daily Invoice",
    route: "NHIcon",
    icon: "information-circle",

  },
  {
    name: "Kolin",
    route: "NHLayout",
    icon: "grid",

  },
  {
    name: "Limak",
    route: "NHList",
    icon: "lock",

  },
  {
    name: "Polaytol",
    route: "ListSwipe",
    icon: "code-working",

  },
  {
    name: "ACTS",
    route: "NHPicker",
    icon: "arrow-dropdown",

  }
];

class SideBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shadowOffsetWidth: 1,
      shadowRadius: 4,
      pressStatus:false
    };
  }
onPressList = (DATA, INDEX) => {

  this.props.navigation.navigate(DATA.route);
  this.setState({ pressStatus : true, selectedItem: INDEX});
}

  render() {
    return (
      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >
          <Image source={drawerCover} style={styles.drawerCover} />
          <FlatList
        data={datas}
        keyExtractor={(item, index) => String(index)}
        renderItem={({ DATA, INDEX }) => {
              <ListItem
                button
                noBorder
                onPress={() => this.onPressList(DATA, INDEX)}
                style={{
               backgroundColor:
                 this.state.selectedItem === INDEX ? "#cde1f9" : "transparent"
             }}
              >
                <Left>
                <Image
                  source={DATA.icon }
                  style={{width:30,height:30}}
                />
                  <Text style={styles.text}>
                    {DATA.name}
                  </Text>
                </Left>
              </ListItem>}}
          />
        </Content>
      </Container>
    );
  }
}

export default SideBar;

Answer 1

在本机 Base 的应用程序示例中，它们不支持背景项目列表的样式。因此，您应该从 NativeBase 更改 List 组件，并从 React Native 添加一个 FlatList 组件。但是您还应该 return 来自 NativeBase 的 ListItem 组件并且不要忘记 import { FlatList } from "react-native";

你也应该修改onPressList函数（我会把它改成箭头函数）

在您的州中，您需要添加州 selectedItem: 0

每次你按下一个项目，你的函数将通过修改一个 selectedItem 索引来调用，它告诉平面列表，哪个项目应该得到哪个背景。我认为这必须是解决方案。

如果无法编译，请确保您支持箭头函数并且没有缺少任何大括号或类似的东西。

最终代码更新

import React, { Component } from "react";
import { Image, FlatList } from "react-native";
import {
  Content,
  Text,
  List,
  ListItem,
  Icon,
  Container,
  Left,
  Right,
  Badge,
  Thumbnail
} from "native-base";
import styles from "./style";

const drawerCover = require("../../imgs/quwait.jpg");
 
const datas = [
  {
    name: "Dashboard",
    route: "Anatomy",
    icon: require("../../imgs/dashboard.png"),

  },
  {
    name: "Companies",
    route: "Header",
    icon: require("../../imgs/enterprise1.png"),
  },
  {
    name: "Company Admin",
    route: "Footer",
    icon: require("../../imgs/icon1.png"),

  },
  {
    name: "Employee",
    route: "NHBadge",
    icon: require("../../imgs/businessman1.png"),

  },
  {
    name: "Employs",
    route: "NHButton",
    icon: require("../../imgs/employee1.png"),

  },
  {
    name: "Announcement",
    route: "NHCard",
    icon: require("../../imgs/megaphone1.png"),

  },
  {
    name: "Holiday",
    route: "Check",
    icon:  require("../../imgs/sun-umbrella1.png"),

  },
  {
    name: "Accounting Report",
    route: "NHTypography",
    icon: require("../../imgs/accounting1.png"),

  },
  {
    name: "Invoice",
    route: "NHCheckbox",
    icon: require('../../imgs/approve-invoice1.png'),

  },
  {
    name: "Settings",
    route: "NHDatePicker",
    icon: require('../../imgs/settings1.png'),
  },
  {
    name: "Safety Phone Numbers",
    route: "NHThumbnail",
    icon: "user",

  },
  {
    name: "NBK",
    route: "NHDeckSwiper",
    icon: "swap",


  },
  {
    name: "ABK",
    route: "NHFab",
    icon: "help-buoy",

  },
  {
    name: "CBK",
    route: "NHForm",
    icon: "call",

  },
  {
    name: "Daily Invoice",
    route: "NHIcon",
    icon: "information-circle",

  },
  {
    name: "Kolin",
    route: "NHLayout",
    icon: "grid",

  },
  {
    name: "Limak",
    route: "NHList",
    icon: "lock",

  },
  {
    name: "Polaytol",
    route: "ListSwipe",
    icon: "code-working",

  },
  {
    name: "ACTS",
    route: "NHPicker",
    icon: "arrow-dropdown",

  }
];

class SideBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shadowOffsetWidth: 1,
      shadowRadius: 4,
      pressStatus:false,
      selectedItem:0
    };
  }

onPressList = (data, index) => {
  this.props.navigation.navigate(data.route);
  this.setState({ pressStatus : true, selectedItem: index});
}

  render() {
    return (
      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >
          <Image source={drawerCover} style={styles.drawerCover} />
          <FlatList
            data={datas}
            keyExtractor={(item, index) => String(index)}
            extraData={this.state.selectedItem}
            renderItem={({item:data, index})  => {
              const { selectedItem: sd } = this.state
              const localColor ={backgroundColor: sd === index ? "#cde1f9" : "transparent"}
              return (
                <ListItem
                  button
                  noBorder
                  style={localColor}
                  onPress={() => this.onPressList(data, index)}                    
                >
                  <Left>
                  <Image
                    source={data.icon}
                    style={{width:30,height:30}}
                  />
                    <Text style={styles.text}>
                      {data.name}
                    </Text>
                  </Left>
                </ListItem>
              )                   
            }}
          />
        </Content>
      </Container>
    );
  }
}

export default SideBar;

如何在使用本机基础 ui 套件的本机反应中以不同颜色显示列表中的选定项目？

How to show selected item in list with a different color in react native using native base ui kit?

jsx

reactjs

react-native

native-base