listview - নেটিভ ভিভিড গ্রিড রিএ্যাক্ট নেটিভ




react-native (6)

আপনার flexbox সংমিশ্রণ এবং flexbox যে স্ক্রোলভিউকে আবৃত করে এবং এর বৈশিষ্ট্যগুলি গ্রহণ করে তা ব্যবহার করতে হবে। এই বিষয়টি মাথায় contentContainerStyle আপনি আইটেমগুলিকে স্টাইল করার জন্য contentContainerStyle সামগ্রী contentContainerStyle স্টাইল প্রপ ব্যবহার করতে পারেন।

var TestCmp = React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      var data = Array.apply(null, {length: 20}).map(Number.call, Number);
      return {
        dataSource: ds.cloneWithRows(data),
      };
    },

    render: function() {
      return (
        <ListView contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
        />
      );
    }
});

কিছু ডামি ডেটা সহ কেবল একটি তালিকাভিউ। contentContainerStyle ব্যবহার নোট করুন। শৈলী অবজেক্টটি এখানে:

var styles = StyleSheet.create({
    list: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        backgroundColor: 'red',
        margin: 3,
        width: 100
    }
});

আমরা ধারককে বলি যে মোড়ক সারিতে আমরা আইটেমগুলি চাই এবং আমরা প্রতিটি সন্তানের বস্তুর প্রস্থ নির্ধারণ করি।

আমি প্রতিক্রিয়া নেটিভ এ একটি সহজ অ্যাপ্লিকেশন তৈরি করছি যা কোনও দূরবর্তী জেএসওএন উত্স থেকে তালিকা আনায় এবং সেগুলি স্ক্রিনে প্রদর্শন করে।

এখনও অবধি, এখানে দুর্দান্ত example ব্যবহার করে, আমি সারিগুলিতে তালিকাভিউ উপাদানগুলি ব্যবহার করে (যেমন প্রতি সারিতে 1 ফলাফল, স্ক্রিনশট দেখুন) ফলাফলগুলি প্রদর্শন করতে সক্ষম হয়েছি। আমার গ্রিডে প্রদর্শন করার জন্য ফলাফলগুলি দরকার, পর্দার আকার এবং দিকনির্দেশের উপর নির্ভর করে প্রতি সারি প্রতি 3 থেকে 6 আইটেম।

গ্রিডে এই ফলাফলগুলি পাওয়ার সর্বোত্তম উপায় কী? আমি কি এর জন্য লিস্টভিউ ব্যবহার করতে পারি, বা এটি কেবল এক-প্রতি-সারি ফলাফলের জন্য? আমি ফ্লেক্সবক্স শৈলীর সাথে প্রায় খেলার চেষ্টা করেছি তবে, যেহেতু প্রতিক্রিয়াটি% মানগুলি গ্রহণ করে না এবং তালিকার ভিউ শৈলীগুলি গ্রহণ করে না বলে এখনও আমার কোনও সাফল্য হয়নি।


আমারও একই সমস্যা ছিল এবং আমি এমন একটি উপাদান লিখেছিলাম যা সেই সমস্যাটি সমাধান করে, আপনি এটি এখানে খুঁজে পেতে পারেন: https://github.com/pavlelekic/react-native-gridview

এছাড়াও, এই উপাদানটি অন্য একটি জিনিস এটি নিশ্চিত করে যে এটি নিশ্চিত করে যে আইটেমগুলির প্রস্থ সম্পূর্ণ সংখ্যা, যাতে আইটেমগুলির সীমানায় অ্যান্টিয়ালাইজিং না থাকে, সেগুলি স্পষ্ট এবং খাস্তা।


একটি দুর্দান্ত পারফরম্যান্স সহ অসীম স্ক্রোলিং সমর্থন করার জন্য প্রতিক্রিয়া নেটিভ এর ফ্ল্যাটলিস্ট উপাদান ব্যবহার করে নিম্নলিখিত উদাহরণটি পরীক্ষা করুন:

//Resize the grid
onLayout = (event) => { 
  const {width} = event.nativeEvent.layout;
  const itemWidth = 150
  const numColumns = Math.floor(width/itemWidth)
  this.setState({ numColumns: numColumns })
}

render() {
  return (
    <Content 
     contentContainerStyle={{flex:1, alignItems: 'center'}}
     onLayout={this.onLayout}>
       <FlatList
        data={this.state.products}
        keyExtractor={(item, index) => index}
        key={this.state.numColumns}
        numColumns={this.state.numColumns}
        renderItem={({item}) => 
          <ListThumb //Custom component, it's only an example.
           navigation={navigation}
           brand={item.brand}
           price={item.price}
           imageSource={item.image_link}/>
        }
     />
   </Content>
  )
}    

উদাহরণটি দেখে মনে হচ্ছে

শুভেচ্ছা, নিকোলস


কলিন রামসে এর উত্তর অনুসরণ করুন। এবং আপনি যদি প্রতিটি আইটেমের অর্ধ প্রস্থ চান, তবে এইভাবে চেষ্টা করুন।

...
import { Dimensions } from 'react-native'; 
const { width, height } = Dimensions.get('window');
const gutter = 0; // You can add gutter if you want
...


const styles = StyleSheet.create({
  item: {
    width: (width - gutter * 3)/2,
    marginBottom: gutter,
    flexDirection: 'column',
    alignSelf: 'flex-start',
    backgroundColor: '#ff0000',
  },
  list: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    paddingHorizontal: gutter,
  },
});

বিক্রিয়া-নেটিভের তালিকায় ভিউয়ের পরিবর্তে ফ্ল্যাটলিস্ট ব্যবহার করুন। এটিতে আরও মূল্য সংযোজন বৈশিষ্ট্য এবং আরও ভাল পারফরম্যান্স রয়েছে। FlatList


FlatList এখন FlatList করা deprecated এবং পরিবর্তে আপনার FlatList ব্যবহার করা উচিত। ফ্ল্যাটলিস্টের নাম numColumns নামে একটি প্রপ numColumns যা আমরা ঠিক একটি স্ক্রোলযোগ্য গ্রিড তৈরি করতে চাই।

উদাহরণ স্বরূপ:

const data = [
  {id: 'a', value: 'A'},
  {id: 'b', value: 'B'},
  {id: 'c', value: 'C'},
  {id: 'd', value: 'D'},
  {id: 'e', value: 'E'},
  {id: 'f', value: 'F'},
];
const numColumns = 3;
const size = Dimensions.get('window').width/numColumns;
const styles = StyleSheet.create({
  itemContainer: {
    width: size,
    height: size,
  },
  item: {
    flex: 1,
    margin: 3,
    backgroundColor: 'lightblue',
  }
});

function Grid(props) {
  return (
    <FlatList
      data={data}
      renderItem={({item}) => (
        <View style={styles.itemContainer}>
          <Text style={styles.item}>{item.value}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      numColumns={numColumns} />
  );
}

এই ব্লগ পোস্টটি ফ্ল্যাটলিস্টের নতুন বৈশিষ্ট্যগুলি ব্যাখ্যা করার জন্য একটি ভাল কাজ করে।

দ্রষ্টব্য: কিছু কারণে আপনাকে প্রতিটি আইটেমের সাধারণ key প্রপসের পরিবর্তে ফ্ল্যাটলিস্টে key এক্সট্র্যাক্টর ব্যবহার করতে হবে। অন্যথায় আপনি একটি সতর্কতা পাবেন। বেসিক ফ্ল্যাটলিস্ট কোড সতর্কতা নিক্ষেপ করে - নেটিভ প্রতিক্রিয়া জানায়





react-native