React native 更新react native中FlatList的特定行_React Native_React Navigation_React Native Flatlist

React native 更新react native中FlatList的特定行

react-native

React native 更新react native中FlatList的特定行,react-native,react-navigation,react-native-flatlist,React Native,React Navigation,React Native Flatlist,我正在使用FlatList加载一些记录。在FlatList上面我有一个按钮，当我点击这个按钮，在FlatList中加载11230个项目时，我想要的是使用onpress更新FlatList项目的特定行背景颜色和图像 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, FlatList, Touchable

我正在使用FlatList加载一些记录。在FlatList上面我有一个按钮，当我点击这个按钮，在FlatList中加载11230个项目时，我想要的是使用onpress更新FlatList项目的特定行背景颜色和图像

   import React, { Component } from 'react';
   import {
     AppRegistry,
     StyleSheet,
     Text,
     View,
     FlatList,
     TouchableOpacity,
     TextInput,
     TouchableWithoutFeedback,
     Image 
   } from 'react-native'; // Impoert required components

   const GLOBAL_DATA = [];//To store json data
   const PER_PAGE = 10;
   const paginateArray = (array, pageSize, pageNumber) => {
     const _pageNumber = pageNumber - 1;
     return array.slice(_pageNumber * pageSize, (_pageNumber + 1) * pageSize);
   };

   for (let i = 0; i <= 100000; i++) {
     GLOBAL_DATA.push({
       key: i,
       produto: {
         descricao: 'Item number ' + i,
       }
     });
   }

   export default class flatlistdemo extends Component {
     constructor(props) {
       super(props);          
       this.state = {
         type: 'default',
         data: [],
         page: 1,
       };
     }

     componentDidMount() {
       this.setState({
         data: paginateArray(GLOBAL_DATA, PER_PAGE, this.state.page),
       });
     }

     getPagedOffers = () => {
       this.setState((state) => ({
         data: state.data.concat( paginateArray(GLOBAL_DATA, PER_PAGE, this.state.page) ),
       }));
     }

     handleLoadMore = () => {
       this.setState({
        page: this.state.page + 1,
       },
       () => {
         this.getPagedOffers();
        }
       );
     }

     render() {
       return (
         <View style={styles.container}>
           <FlatList
             data={this.state.data}
             onEndReached={this.handleLoadMore}
             onEndReachedThreshold={50}
             getItemLayout={(data, index) => (
               {length: 40, offset: 40 * index, index}
             )}
             renderItem={this._renderItem}
           />       
         </View>
       );
     }

     _renderItem = ({item}) => (
       <MyListItem
         produto={item.produto}
       />
     );
     }

     class MyListItem extends React.PureComponent {
       render() {
         return (
          <View 
            style={{
              paddingVertical: 10,
              backgroundColor:"#321AFE"
          }}>
            <TouchableOpacity onPress={() => this.updateRow(this.props.produto)}>
              <Text 
                style={{
                  color: '#000', 
                  height: 40,
                  justifyContent: 'center'
              }}>
                  {this.props.produto.descricao}
              </Text>
              <Image uri={{xyz}}
            </TouchableOpacity>
          </View>
         )
        }

       updateRow(item){
       //Here i want to update item of flatlist with new image and background color
       }
       }
       //Styles used for page
       const styles = StyleSheet.create({
          container: {
            marginTop: 30,
            alignItems: 'center',
          },
       });

       AppRegistry.registerComponent('flatlistdemo', () => flatlistdemo);

您可以使用flatlist的选定道具来实现此目标（可能是）

您的构造函数应该为所选对象初始化空状态

constructor(props){
   super(props)
   this.state={
     slected:{}
   }
}

渲染函数应该如下所示

render(){
     <FlatList
              data={YOUR_DATA}
              removeClippedSubviews={false}
              keyExtractor={(item, index) => item.key}
              renderItem={this.renderItem.bind(this)}
              selected={this.state.selected} />
}

renderItem= ({ item, index }) =>{
    let {selected } = this.state;
    let isSelected = !!selected[item.key]; // renderItem depends on state


    return (
     <View>
        {isSelected?
         <Text>Yes, I am Selected row</Text>:
         <Text>Please select me</Text>}
     </View>
    );
}

render（）{
item.key}
renderItem={this.renderItem.bind（this）}
selected={this.state.selected}/>
}

您的renderItem函数应该如下所示

render(){
     <FlatList
              data={YOUR_DATA}
              removeClippedSubviews={false}
              keyExtractor={(item, index) => item.key}
              renderItem={this.renderItem.bind(this)}
              selected={this.state.selected} />
}

renderItem= ({ item, index }) =>{
    let {selected } = this.state;
    let isSelected = !!selected[item.key]; // renderItem depends on state


    return (
     <View>
        {isSelected?
         <Text>Yes, I am Selected row</Text>:
         <Text>Please select me</Text>}
     </View>
    );
}

renderItem=（{item，index}）=>{
设{selected}=this.state；
let isSelected=！！selected[item.key]；//renderItem取决于状态
返回(
{你当选了吗？
是，我被选为第行：
请选择我}
);
}

更新所选内容的功能

updateSelected =(isSingleSelected = false, rowsToUpdate = ARRAY OF ROWS NEED BE SELECTED)=>{
    if(isSingleSelected){
         let item = rowsToUpdate[0];
         this.setState((prevState)=>{
              let {prevSelected} = prevState;
              return {
                   selected:{[item.key]:!prevSelected[item.key]} //just toggle the state of current item
              }
         }
    }else{
       items = rowsToUpdate[0];
       this.setState((prevState)=>{
           let {prevSelected} = prevState;
           let objUpdating={}
           for(let i =0; i< items.length; i++){
               let item = items[i];
               objUpdating = {...objUpdating,[item.key]:!objUpdating[item.key]}        //using spread operator to avoid mutation you can try concat
           }
          return {
               selected:{...prevSelected, ...objUpdating} //matching keys will be overwritten
          }
       }
    }
}

updateSelected=（isSingleSelected=false，rowsToUpdate=需要选择行数组）=>{
如果（已选定）{
let item=rowsToUpdate[0]；
this.setState（（prevState）=>{
设{prevSelected}=prevState；
返回{
选中：{[item.key]：！prevSelected[item.key]}//只需切换当前项的状态即可
}
}
}否则{
items=rowsToUpdate[0]；
this.setState（（prevState）=>{
设{prevSelected}=prevState；
设objUpdating={}
for（设i=0；i


试试这个，让我们知道这是否适合你
可以有更好的解决方案，请添加您的，因为我也在寻找更好的实施
您可以使用flatlist的选定道具来实现此目标（可能是）
您的构造函数应该为所选对象初始化空状态
constructor(props){
   super(props)
   this.state={
     slected:{}
   }
}

渲染函数应该如下所示
render(){
     <FlatList
              data={YOUR_DATA}
              removeClippedSubviews={false}
              keyExtractor={(item, index) => item.key}
              renderItem={this.renderItem.bind(this)}
              selected={this.state.selected} />
}

renderItem= ({ item, index }) =>{
    let {selected } = this.state;
    let isSelected = !!selected[item.key]; // renderItem depends on state


    return (
     <View>
        {isSelected?
         <Text>Yes, I am Selected row</Text>:
         <Text>Please select me</Text>}
     </View>
    );
}

render（）{
item.key}
renderItem={this.renderItem.bind（this）}
selected={this.state.selected}/>
}

您的renderItem函数应该如下所示
render(){
     <FlatList
              data={YOUR_DATA}
              removeClippedSubviews={false}
              keyExtractor={(item, index) => item.key}
              renderItem={this.renderItem.bind(this)}
              selected={this.state.selected} />
}

renderItem= ({ item, index }) =>{
    let {selected } = this.state;
    let isSelected = !!selected[item.key]; // renderItem depends on state


    return (
     <View>
        {isSelected?
         <Text>Yes, I am Selected row</Text>:
         <Text>Please select me</Text>}
     </View>
    );
}

renderItem=（{item，index}）=>{
设{selected}=this.state；
let isSelected=！！selected[item.key]；//renderItem取决于状态
返回(
{你当选了吗？
是，我被选为第行：
请选择我}
);
}

更新所选内容的功能
updateSelected =(isSingleSelected = false, rowsToUpdate = ARRAY OF ROWS NEED BE SELECTED)=>{
    if(isSingleSelected){
         let item = rowsToUpdate[0];
         this.setState((prevState)=>{
              let {prevSelected} = prevState;
              return {
                   selected:{[item.key]:!prevSelected[item.key]} //just toggle the state of current item
              }
         }
    }else{
       items = rowsToUpdate[0];
       this.setState((prevState)=>{
           let {prevSelected} = prevState;
           let objUpdating={}
           for(let i =0; i< items.length; i++){
               let item = items[i];
               objUpdating = {...objUpdating,[item.key]:!objUpdating[item.key]}        //using spread operator to avoid mutation you can try concat
           }
          return {
               selected:{...prevSelected, ...objUpdating} //matching keys will be overwritten
          }
       }
    }
}

updateSelected=（isSingleSelected=false，rowsToUpdate=需要选择行数组）=>{
如果（已选定）{
let item=rowsToUpdate[0]；
this.setState（（prevState）=>{
设{prevSelected}=prevState；
返回{
选中：{[item.key]：！prevSelected[item.key]}//只需切换当前项的状态即可
}
}
}否则{
items=rowsToUpdate[0]；
this.setState（（prevState）=>{
设{prevSelected}=prevState；
设objUpdating={}
for（设i=0；i

试试这个，让我们知道这是否适合你
可以有更好的解决方案，请添加您的，因为我也在寻找更好的实施
你知道吗？下面的答案对你有帮助吗？你知道吗？下面的答案对你有帮助吗？