标签: react-native-flatlist

我认为 FlatList 的 pagingEnabled={true} 与 viewpager 的贡献相同。两者有何区别？

我需要使用 React 导航选项卡和 tabBarComponent 创建自定义的可滚动顶部选项卡栏，而不使用任何其他第三方库。

const TopTabBar = createMaterialTopTabNavigator({
    Home: HomePage,
    Entertainment: EntertainmentNews,
    Business: BusinessStack,
    Music: MusicStack,
    Politics: PoliticsStack,
    Sports: SportsStack,
    Technology: TechnologyStack,
    WorldNews: WorldNewsStack
}, {
    tabBarComponent: (props) => <TopTabBarComponent {...props}/>
})

在此使用选项卡栏组件时，我可以创建顶部栏，但滑动屏幕时它不会滚动？

import React , { Component } from 'react'
import { Text, View, StyleSheet, FlatList, TouchableOpacity, Animated, Dimensions} from 'react-native'

interface Props {
    navigation?: any
}

interface State {
    //
}

export class TopTabBarComponent extends Component <Props, State>{
    flatListRef
    constructor(props: Props, state: State){
        super(props, state)
    }





    onPressItem …

在我的 React 本机页面中，
我使用参数从一个页面导航到另一个页面

因此这些参数具有 id，它将用于从端点获取数据并将其显示在平面列表中

function Assessments ({route,navigation}) {
  useEffect(()=>{
    fetchData(file)
  },[]);
  const { file } = route.params;
  const [data,setData] = useState([]);

文件由路由参数（Id）组成

和 fetchdata 函数触发该函数与 id 并获取数据

  const fetchData = async (file) => {
    axios.get(`endpoint`)

      .then(function (response) {
        console.log(response.data)
        setData(response.data)
  


      })
      .catch(function (error) {
          console.log(error);
      })

  }

我正在返回这个

 return (

<View>
  <Text>okay</Text>


      <FlatList 
            flexGrow= {0}

            minHeight= '20%'
            maxHeight='80%'
      data={data}
      renderItem={showdata}>
      </FlatList>


      </View>
 )

渲染项目是

  const showdata = ({item}) => {
      <View>
        sdfdsfsdf
      </View>
    
  }

但这部分甚至没有被渲染

不知道问题出在哪里！

控制台.log()

{ …

我无法访问FlatList中的组件ref子代。在componentDidMount方法上，对于FlatList我只有一个引用。

这是我的代码，以备您复制时使用：

import React, { Component } from "react";
import {
  AppRegistry,
  FlatList,
  StyleSheet,
  Text,
  View
} from "react-native";

export default class touchable extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          ref="REF-FLATLIST"
          data={[{ key: "a" }, { key: "b" }]}
          renderItem={({ item }) =>
            <Text ref={`REF-FLATLIST${item.key}`}>
              {item.key}
            </Text>}
        />
      </View>
    );
  }
  componentDidMount() {
    console.log(this.refs);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});

AppRegistry.registerComponent("touchable", () => touchable);

我正在使用React …

用户需要在点击两次FlatList项目，因为autoFocus={true}对<TextInput。第一次单击时，键盘处于隐藏状态，然后单击呼叫onPress={this.GetItem.bind(this, item)}。是否可以选择GetItem()单击一次而不是单击两次。

演示：https：//snack.expo.io/ByJ_yWehM

export default class App extends Component {
  GetItem (item) {
    console.log(item);
    Alert.alert(item);
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          autoFocus={true}
          style={styles.paragraph}
          keyboardType='web-search'
        >
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url.
        </TextInput>
        <Card title="Local Modules">
          <View>
            <TextInput
              style={styles.searchField}
              placeholder="Type here to translate!"
              onChangeText={(text) => this.setState({text})}
            />

            <FlatList
                data={["akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate","akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate"]}
                renderItem={({item}) => (
                  <Text
                    style={styles.listField} …

我有以下应用程序，并且在我的 FlatList 上收到一条奇怪的错误消息：

Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of 
type `number` supplied to `CellRenderer`, expected `string`.

Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of 
type `number` supplied to `CellRenderer`, expected `string`.

import React from 'react';
import { StyleSheet, Text, ScrollView, FlatList, View, Button, SegmentedControlIOS } from 'react-native';
import contacts from './contacts';
import {Constants} from 'expo';

console.log(contacts)

const Row=(props)=>(
  <View style={styles.row}>
    <Text >{props.name}</Text>
    <Text >{props.phone}</Text>
  </View>
)

export default class App extends React.Component {
  state={show: …

所以我基本上是在寻找错误和我做错了什么，我得到了每个键不同的数据，我试图获取activeRow的数据，由于某种原因我没有定义，这是怎么回事在？谢谢！尝试记录“this.props.index”后我变得未定义我已经调用了构造函数（道具）和超级（道具），所以我不知道为什么我要记录我的道具它说未定义而不是给我索引或项目...

有我的渲染！

render() {
  const swipeSettings = {
    autoClose: true,
    buttonWidth: 130,
    onClose: (secId, rowId, direction) => {
      if (this.state.activeRowKey != null) {
        this.setState({ activeRowKey: null })
      }
    },
    onOpen: (secId, rowId, direction) => {
      this.setState({ activeRowKey: this.props.index })
      console.log(this.state.activeRowKey)
    },
    right: [
      {
        onPress: () => {

        },
        text: 'Verify', type: 'default', backgroundColor: 'lime', color: 'black', component: (
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'column',
            }}
          >
            <Ionicons name="md-checkmark" size={40} />
          </View>
        )
      }
    ],
    left: …

这是我的FlatList代码

 <FlatList
    ref={ref => this.flatListRef = ref}
    data={this.state.data}
    renderItem={({ item, index }) => this.renderItems(item, index)}
    onScroll={(e) => this.handleScroll(e)}
/>

这是handleScroll我得到的方法ScrollPosition

handleScroll(event) {
    this.props.updateAppState('scrollPosition', event.nativeEvent.contentOffset.y);
}

最后被componentDidMount ScrollToOffset称为

componentDidMount() {
    this.flatListRef.scrollToOffset({ animated: false, offset: this.props.app.scrollPosition});
}

FlatList从不滚动它的列表。我现在真的很无助。谁能告诉我我该怎么做才能达到scroll预期的效果offset？谢谢。

第一行显示一张卡片，这是因为假设存在的项目与所述条件不匹配。但我想删除这个空格，并将当前位于下一行的下一张卡放在那里。

{state.data ? <FlatList
                data={state.data}

                renderItem={({ item }) => {
                    console.log(item)
                    return (
                        <View style={{ justifyContent: 'space-evenly', marginHorizontal: 0 }}>
                           <View>

                                {item.available == 1 ?
                                    <TouchableOpacity activeOpacity={.8} onPress={() => navigation.navigate('Appointment', { id: item.id, name: item.name, phone: item.phone, email: item.email, session: item.session, player_id: item.player_id, picture: item.picture })} >
                                        <Card style={{ width: width / 2.05, alignItems: 'center', justifyContent: 'center', borderRadius: 15, paddingTop: 10, height: height / 2.4 }}>
                                            <CardItem cardBody>
                                                <Image
                                                    source={{ uri: 'http://example.com/storage/' + item.picture }}
                                                    style={{ height: 200, width: null, …

我是 React Native 的新手。字母表位于应用程序屏幕的顶部。单击任何字母时，所单击的字母会出现在屏幕上。我希望单击的字母的颜色与平面列表中其他字母的颜色不同。我怎样才能做到这一点？

代码：

import React, { useState } from 'react'
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native'

const WordPage = () => {

    const [selectedLetter, setSelectedLetter] = useState("A")

    const alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K",
        "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

    const _renderAlphabet = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => { setSelectedLetter(item) }}>
                <View style={styles.alphabetContainer}> …