Question

我想知道如何像在视频中https://drive.google.com/file/d/18toZsSfRIda9ScHq_rpgXziRaKIriYUt/view

一样在ScrollView中创建多个粘性组件。

我使用Flatlist。你有什么想法吗？

Answer 1

创建了一个工作示例。 https://snack.expo.io/HkR-dKkzQ

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  Image,
  FlatList,
  AsyncStorage
} from 'react-native';
import { ListItem, Left, Body, Right, Title } from "native-base";

const window = Dimensions.get('window');

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

var localizedString;

type Props = {};
export default class App extends Component<Props> {

constructor(Props){
    super(Props);
    this.state={
      stickyHeaderIndices: [],
        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 }
      ],
    };
  }


componentWillMount(){
  var arr = [];
    this.state.data.map(obj => {
      if (obj.header) {
        arr.push(this.state.data.indexOf(obj));
      }
    });
    arr.push(0);
    this.setState({
      stickyHeaderIndices: arr
    });
}

renderItem = ({ item }) => {
    if (item.header) {
      return (
        <ListItem itemDivider>

          <Body style={{ marginRight: 40 }}>
            <Text style={{ fontWeight: "bold" }}>
              {item.name}
            </Text>
          </Body>
        </ListItem>
      );
    } else if (!item.header) {
      return (
        <ListItem style={{ marginLeft: 15}}>
        <TouchableOpacity onPress={()=>{this.componentWillMount()}} style={{width:'100%'}}>
          <Body>
            <Text>{item.name}</Text>
          </Body>
        </TouchableOpacity>
        </ListItem>
      );
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
              <FlatList
                data={this.state.data}
                renderItem={this.renderItem}
                keyExtractor={item => item.name}
                stickyHeaderIndices={this.state.stickyHeaderIndices}
              />
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

在ScrollView中反应本机多个粘性组件

1 个答案: