reactjs - 如何在使用本机基本 ui 工具包的本机反应中以不同颜色显示列表中的选定项目？

Question

我想以不同的背景颜色显示侧边栏内容。为此，我已经尝试过TouchableOpacity underlay了。但这不是我要寻找的。给出TouchableOpacity后，它只会改变文本的颜色，而不是整个列表背景。当我使用本机基本 ui 套件时，如何更改列表项背景颜色。请帮助。有什么方法可以做到这一点吗？这就是侧边栏的样子。我做了类似以下的事情。在pressStatus里面设置为 trueonPresList如果是真的改变背景颜色。但导航route不起作用。有一个错误

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;

标签： reactjsreact-nativejsxnative-base

Answer 1

在原生 Base 的 App 示例中，它们不支持背景项目列表的样式。因此，您应该List从 NativeBase 更改您的组件，并FlatList从 react native 添加一个组件。但是你也应该ListItem从 NativeBase 返回组件并且不要忘记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;