javascript 如何在react native的平面列表中更改项目ID时更改标题文本

mbskvtky  于 2023-01-19  发布在  Java
关注(0)|答案(3)|浏览(130)

App.js

import React from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from 'react-native';

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);
const Render_FlatList_Sticky_header = () => {
  return (
    <>
      <Text>hello</Text>
    </>
  );
};
const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={(item) => item.id}
        stickyHeaderIndices={[0]}
        ListHeaderComponent={Render_FlatList_Sticky_header}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

它使用粘性标头,但当www.example.com不同时,我希望使用不同的标头item.id
喜欢

  • 如果Item.id=1则我的粘性报头文本是“A”,
  • 如果Item.id=2则我的粘性报头文本是“B”,
  • 如果Item.id=3,则我的粘性标题文本为“B”

我尝试这样做,但它给了我一个错误

  • 任何人都能帮我🐼*
ffx8fchx

ffx8fchx1#

你可以这样做:

import React from "react";
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from "react-native";

const DATA = [
  {
    id: "0",
    title: "Zero Item",
  },
  {
    id: "1",
    title: "First Item",
  },
  {
    id: "2",
    title: "second Item",
  },
  {
    id: "3",
    title: "Third Item",
  },
  {
    id: "4",
    title: "Fourth Item",
  },
  {
    id: "5",
    title: "Fifth Item",
  },
  {
    id: "6",
    title: "Sixth Item",
  },
  {
    id: "7",
    title: "Seventh Item",
  },
  {
    id: "8",
    title: "Eighth Item",
  },
  {
    id: "9",
    title: "Nineth Item",
  },
  {
    id: "10",
    title: "Tenth Item",
  },
  {
    id: "11",
    title: "Eleventh Item",
  },
  {
    id: "12",
    title: "Twelveth Item",
  },
  {
    id: "13",
    title: "Thirteenth Item",
  },
  {
    id: "14",
    title: "Fourteenth Item",
  },
  {
    id: "15",
    title: "Fifteenth Item",
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const [Viewable, SetViewable] = React.useState(null);
  const ref = React.useRef(null);

  const onViewRef = React.useRef((viewableItems) => {
     console.log(viewableItems.viewableItems[0]) //<-----here log
       //viewableItems<-- it is all items which are currently visible to you.
    SetViewable(viewableItems.viewableItems[0].item);
  });

  const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 80 });

  const Render_FlatList_Sticky_header = () => {
    return (
      <>
        <Text>hello{Viewable?.id}</Text>
      </>
    );
  };
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={(item) => item.id}
        stickyHeaderIndices={[0]}
        ListHeaderComponent={Render_FlatList_Sticky_header}
        ref={ref}
        onViewableItemsChanged={onViewRef.current}
        viewabilityConfig={viewConfigRef.current}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

您可以使用可见项目并获得所需的输出。
你想要这个if Item.id=1 then my sticky Header text is "A",,那么现在你有了最上面的项,所以根据Viewable变量在Render_FlatList_Sticky_header中添加switch case。
如下所示:

const checkSwitch = (param) => {
    switch (param) {
      case "1":
        return "A";
        break;

      case "2":
        return "B";
        break;

      case "3":
        return "C";
        break;

      case "4":
        return "D";
        break;

      default:
        return "AA";
    }
  };

  const Render_FlatList_Sticky_header = () => {
    return (
      <>
        <Text>hello{checkSwitch(Viewable?.id)}</Text>
      </>
    );
  };
bfnvny8b

bfnvny8b2#

我猜这就是你想要的

import React, {useEffect, useState} from 'react';
    import {FlatList, Text, View} from 'react-native';
    
    const DATA = [
      {name: 'Movies', header: true},
      {name: 'Interstellar', header: false},
      {name: 'Dark Knight', header: false},
      {name: 'Pop', header: false},
      {name: 'Pulp Fiction', header: false},
      {name: 'Burning Train', header: false},
      {name: 'Music', header: true},
      {name: 'Adams', header: false},
      {name: 'Nirvana', header: false},
      {name: 'Amrit Maan', header: false},
      {name: 'Oye Hoye', header: false},
      {name: 'Eminem', header: false},
      {name: 'Places', header: true},
      {name: 'Jordan', header: false},
      {name: 'Punjab', header: false},
      {name: 'Ludhiana', header: false},
      {name: 'Jamshedpur', header: false},
      {name: 'India', header: false},
      {name: 'People', header: true},
      {name: 'Jazzy', header: false},
      {name: 'Appie', header: false},
      {name: 'Baby', header: false},
      {name: 'Sunil', header: false},
      {name: 'Arrow', header: false},
      {name: 'Things', header: true},
      {name: 'table', header: false},
      {name: 'chair', header: false},
      {name: 'fan', header: false},
      {name: 'cup', header: false},
      {name: 'cube', header: false},
    ];
    const App = () => {
      const [stickyHeaderIndices, setStickyHeaderIndices] = useState([0]);
    
      useEffect(() => {
        var arr = [];
        DATA.map((obj, key) => {
          if (obj.header) {
            arr.push(DATA.indexOf(obj));
          }
        });
        arr.push(0);
        setStickyHeaderIndices(arr);
      }, []);
    
      renderItem = ({item}) => {
        if (item.header) {
          return (
            <View style={{width: '100%', height: 40, backgroundColor: '#fff'}}>
              <Text style={{fontWeight: 'bold', fontSize: 16, textAlign: 'center'}}>
                {item.name}
              </Text>
            </View>
          );
        } else if (!item.header) {
          return (
            <View style={{width: '100%', height: 30, borderWidth: 1}}>
              <Text style={{fontSize: 16}}>{item.name}</Text>
            </View>
          );
        }
      };
    
      return (
        <FlatList
          data={DATA}
          renderItem={item => renderItem(item)}
          keyExtractor={item => item.name}
          stickyHeaderIndices={stickyHeaderIndices}
        />
      );
    };
    export default App;
klr1opcd

klr1opcd3#

你可以使用状态来动态地设置报头。

import { FlatList } from 'react-native';

const MyList = ({ data }) => {
  const [headerText, setHeaderText] = useState('');

  const handleViewableItemsChanged = ({ viewableItems }) => {
    if (viewableItems && viewableItems.length > 0) {
      const firstViewableItem = viewableItems[0];
      setHeaderText(`Item ID: ${firstViewableItem.item.id}`);
    }
  };

  return (
    <View>
      <Text>{headerText}</Text>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <Text>{item.name}</Text>}
        onViewableItemsChanged={handleViewableItemsChanged}
        viewabilityConfig={{
          itemVisiblePercentThreshold: 50
        }}
      />
    </View>
  );
};

相关问题