how to set data A to Z alphabetic order when user select A to Z into drop down in react native?

huangapple
go评论104阅读模式
英文:

how to set data A to Z alphabetic order when user select A to Z into drop down in react native?

问题

我正在创建一个屏幕，可以显示来自API的1000条数据。

这是图片：

how to set data A to Z alphabetic order when user select A to Z into drop down in react native?

现在我有一个下拉框，用户可以在下拉框中选择从A到Z的字母，然后在选择A到Z的字母顺序后，数据按照A到Z的字母顺序排列。所有数据按A到Z的顺序设置，那么我该如何在我的代码中执行这个功能？

我尝试了以下代码：

  1.  // setData(json.results);  <==================it for sorting
  2.       // setData((prevData) => [...prevData, ...newData]);
  4.       // const sorted = [...sortedData, ...newData].sort((a, b) => {
  5.       //   const lastNameA = a.name.first.toLowerCase();
  6.       //   const lastNameB = b.name.first.toLowerCase();
  7.       //   if (lastNameA < lastNameB) return -1;
  8.       //   if (lastNameA > lastNameB) return 1;
  9.       //   return 0;
  10.       // });
  11.       // setSortedData(sorted);

但是当我在下拉框中选择A到Z顺序列表时，它不起作用。

我该如何做到这一点？

代码:

  1. import {
  2.   StyleSheet,
  3.   Text,
  4.   View,
  5.   Image,
  6.   TextInput,
  7.   FlatList,
  8.   ActivityIndicator,
  9.   SafeAreaView,
  10. } from 'react-native';
  11. import React, { useEffect, useState } from 'react';
  12. import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
  13. import { RFPercentage } from 'react-native-responsive-fontsize';
  14. import SelectDropdown from 'react-native-select-dropdown';
  16. const sortby = ['A to Z', 'Newawst', 'Oldest'];
  18. const App = () => {
  19.   const [loading, setLoading] = useState(true);
  20.   const [data, setData] = useState([]);
  21.   const [search, setSearch] = useState('');
  22.   const [filteredDataSource, setFilteredDataSource] = useState([]);
  23.   const [masterDataSource, setMasterDataSource] = useState([]);
  24.   const [total, setTotalData] = useState(0);
  25.   const [searchCount, setSearchCount] = useState(0);
  26.   const [sortedData, setSortedData] = useState([]);
  28.   useEffect(() => {
  29.     fetchData();
  30.   }, []);
  32.   const fetchData = async () => {
  33.     try {
  34.       const response = await fetch('https://randomuser.me/api?results=1000');
  35.       const json = await response.json();
  36.       const newData = json.results;
  38.       setLoading(false);
  39.       setFilteredDataSource(json.results);
  40.       setMasterDataSource(json.results);
  41.       setTotalData(json.info.results);
  42.     } catch (error) {
  43.       console.error(error);
  44.     }
  45.   };
  47.   const searchFilterFunction = (text) => {
  48.     // 检查搜索文本是否不为空
  49.     if (text) {
  50.       // 插入的文本不为空
  51.       // 过滤masterDataSource并更新FilteredDataSource
  52.       const newData = masterDataSource.filter(function (item) {
  53.         // 在搜索栏中应用过滤器
  54.         const itemData = item.name.first
  55.           ? item.name.first.toUpperCase()
  56.           : ''.toUpperCase();
  57.         const textData = text.toUpperCase();
  58.         return itemData.indexOf(textData) > -1;
  59.       });
  60.       setFilteredDataSource(newData);
  61.       setSearch(text);
  62.       setSearchCount(newData.length);
  63.     } else {
  64.       // 插入的文本为空
  65.       // 使用masterDataSource更新FilteredDataSource
  66.       setFilteredDataSource(masterDataSource);
  67.       setSearch(text);
  68.     }
  69.   };
  71.   const renderItem = ({ item }) => (
  72.     <View style={{ padding: 10 }}>
  73.       <Text>Name :{`${item.name.first} ${item.name.last}`}</Text>
  74.       <Text>Email :{item.email}</Text>
  75.       <Text>City :{item.location.city}</Text>
  76.       <Text>State :{item.location.state}</Text>
  77.       <Text>Country :{item.location.country}</Text>
  78.       <Text>Postcode :{item.location.postcode}</Text>
  79.     </View>
  80.   );
  81.   const ItemSeparatorView = () => {
  82.     return (
  83.       // Flat List Item Separator
  84.       <View
  85.         style={{
  86.           height: 0.5,
  87.           width: '100%',
  88.           backgroundColor: '#000',
  89.         }}
  90.       />
  91.     );
  92.   };
  94.   return (
  95.     <View>
  96.       <View style={styles.header}>
  97.         <Image source={require('../img/menu.png')} style={styles.menuimg} />
  98.         <Image source={require('../img/logo.png')} style={styles.logoimg} />
  99.         <Image source={require('../img/user.png')} style={styles.userimg} />
  100.       </View>
  101.       <View style={{ alignItems: 'center' }}>
  102.         <View style={styles.textbox}>
  103.           <TextInput
  104.             style={styles.textInputStyle}
  105.             onChangeText={(text) => searchFilterFunction(text)}
  106.             value={search}
  107.             focusable={true}
  108.             underlineColorAndroid="transparent"
  109.             placeholder="Search"
  110.             placeholderTextColor={'#000'}
  111.             selectionColor="#000"
  112.           />
  113.           <Image
  114.             source={require('../img/filter.png')}
  115.             style={{ marginRight: scale(10) }}
  116.           />
  117.         </View>
  118.       </View>
  119.       <View
  120.         style={{
  121.           flexDirection: 'row',
  122.           marginTop: verticalScale(10),
  123.           justifyContent: 'space-around',
  124.           alignItems: 'center',
  125.         }}>
  126.         <Text style={styles.resulttext}>
  127.           {searchCount == 0 ? total : searchCount} results
  128.         </Text>
  129.         <SelectDropdown
  130.           data={sortby}
  131.           // defaultValueByIndex={1}
  132.           onSelect={(selectedItem, index) => {
  133.             console.log(selectedItem, index);
  134.           }}
  135.           defaultButtonText={'Sort By'}
  136.           buttonTextAfterSelection={(selectedItem, index) => {
  137.             return selectedItem;
  138.           }}
  139.           rowTextForSelection={(item, index) => {
  140.             return item;
  141.           }}
  142.           buttonStyle={styles.dropdown2BtnStyle}
  143.           buttonTextStyle={styles.dropdown2BtnTxtStyle}
  144.           renderDropdownIcon={(isOpened) => {
  145.             return isOpened ? (
  146.               <>
  147.                 <Image
  148.                   source={require('../img/arrowup.png')}
  149.                   style={{
  150.                     width: scale(15),
  151.                     height: verticalScale(15),
  152.                     marginRight: verticalScale(10),
  153.                   }}
  154.                 />
  155.               </>
  156.             ) : (
  157.               <>
  158.                 <Image
  159.                   source={require('../img/arrowdown.png')}
  160.                   style={{
  161.                     width: scale(15),
  162.                     height: verticalScale(15),
  163.                     marginRight: verticalScale(10),
  164.                   }}
  165.                 />
  166.               </>
  167.             );
  168.           }}
  169.           dropdownIconPosition={'right'}
  170.           dropdownStyle={styles.dropdown2DropdownStyle}
  171.           rowStyle={styles.dropdown2RowStyle}
  172.           rowTextStyle={styles.dropdown2RowTxtStyle}
  173.         />
  174.       </View>
  176.       <View style={{ marginTop: scale(10) }}>
  177.         <SafeAreaView>
  178.           {loading ? (
  179.             <ActivityIndicator size="small" color="black" />
  180.           ) : (
  181.             <FlatList
  182.               data={filtered
  184. <details>
  185. <summary>英文:</summary>
  187. I&#39;m creating a screen that can be displayed 1000 data it comes from the API
  189. here is image
  191. [![enter image description here](https://i.stack.imgur.com/ErbDD.png)](https://i.stack.imgur.com/ErbDD.png)
  193. now I have a drop-down box where users select A to Z alphabet into a drop-down box then after selecting A to Z alphabetic order then  data arange in A to Z alphabetic order. all data set in A to Z order so how can I do this function in my code 
  195. I&#39;m try this code

// setData(json.results); <==================it for sorting
// setData((prevData) => [...prevData, ...newData]);

  1.   // const sorted = [...sortedData, ...newData].sort((a, b) =&gt; {
  2. //   const lastNameA = a.name.first.toLowerCase();
  3. //   const lastNameB = b.name.first.toLowerCase();
  4. //   if (lastNameA &lt; lastNameB) return -1;
  5. //   if (lastNameA &gt; lastNameB) return 1;
  6. //   return 0;
  7. // });
  8. // setSortedData(sorted);
  2. but its not working when I&#39;m selecting A to Z order list in to drop down box
  3. how can I do that ?
  4. **code:**

import {
StyleSheet,
Text,
View,
Image,
TextInput,
FlatList,
ActivityIndicator,
SafeAreaView,
} from 'react-native';
import React, { useEffect, useState } from 'react';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import { RFPercentage } from 'react-native-responsive-fontsize';
import SelectDropdown from 'react-native-select-dropdown';

const sortby = ['A to Z', 'Newawst', 'Oldest'];

const App = () => {
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
const [search, setSearch] = useState('');
const [filteredDataSource, setFilteredDataSource] = useState([]);
const [masterDataSource, setMasterDataSource] = useState([]);
const [total, setTotalData] = useState(0);
const [searchCount, setSearchCount] = useState(0);
const [sortedData, setSortedData] = useState([]);

useEffect(() => {
fetchData();
}, []);

const fetchData = async () => {
try {
const response = await fetch('https://randomuser.me/api?results=1000');
const json = await response.json();
const newData = json.results;

  1.   setLoading(false);
  2. setFilteredDataSource(json.results);
  3. setMasterDataSource(json.results);
  4. setTotalData(json.info.results);
  5. } catch (error) {
  6. console.error(error);
  7. }

};

const searchFilterFunction = (text) => {
// Check if searched text is not blank
if (text) {
// Inserted text is not blank
// Filter the masterDataSource and update FilteredDataSource
const newData = masterDataSource.filter(function (item) {
// Applying filter for the inserted text in search bar
const itemData = item.name.first
? item.name.first.toUpperCase()
: ''.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setFilteredDataSource(newData);
setSearch(text);
setSearchCount(newData.length);
} else {
// Inserted text is blank
// Update FilteredDataSource with masterDataSource
setFilteredDataSource(masterDataSource);
setSearch(text);
}
};

const renderItem = ({ item }) => (
<View style={{ padding: 10 }}>
<Text>Name :{${item.name.first} ${item.name.last}}</Text>
<Text>Email :{item.email}</Text>
<Text>City :{item.location.city}</Text>
<Text>State :{item.location.state}</Text>
<Text>Country :{item.location.country}</Text>
<Text>Postcode :{item.location.postcode}</Text>
</View>
);
const ItemSeparatorView = () => {
return (
// Flat List Item Separator
<View
style={{
height: 0.5,
width: '100%',
backgroundColor: '#000',
}}
/>
);
};

return (
<View>
<View style={styles.header}>
<Image source={require('../img/menu.png')} style={styles.menuimg} />
<Image source={require('../img/logo.png')} style={styles.logoimg} />
<Image source={require('../img/user.png')} style={styles.userimg} />
</View>
<View style={{ alignItems: 'center' }}>
<View style={styles.textbox}>
<TextInput
style={styles.textInputStyle}
onChangeText={(text) => searchFilterFunction(text)}
value={search}
focusable={true}
underlineColorAndroid="transparent"
placeholder="Search"
placeholderTextColor={'#000'}
selectionColor="#000"
/>
<Image
source={require('../img/filter.png')}
style={{ marginRight: scale(10) }}
/>
</View>
</View>
<View
style={{
flexDirection: 'row',
marginTop: verticalScale(10),
justifyContent: 'space-around',
alignItems: 'center',
}}>
<Text style={styles.resulttext}>
{searchCount == 0 ? total : searchCount} results
</Text>
<SelectDropdown
data={sortby}
// defaultValueByIndex={1}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
defaultButtonText={'Sort By'}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem;
}}
rowTextForSelection={(item, index) => {
return item;
}}
buttonStyle={styles.dropdown2BtnStyle}
buttonTextStyle={styles.dropdown2BtnTxtStyle}
renderDropdownIcon={(isOpened) => {
return isOpened ? (
<>
<Image
source={require('../img/arrowup.png')}
style={{
width: scale(15),
height: verticalScale(15),
marginRight: verticalScale(10),
}}
/>
</>
) : (
<>
<Image
source={require('../img/arrowdown.png')}
style={{
width: scale(15),
height: verticalScale(15),
marginRight: verticalScale(10),
}}
/>
</>
);
}}
dropdownIconPosition={'right'}
dropdownStyle={styles.dropdown2DropdownStyle}
rowStyle={styles.dropdown2RowStyle}
rowTextStyle={styles.dropdown2RowTxtStyle}
/>
</View>

  1.   &lt;View style={{ marginTop: scale(10) }}&gt;
  2. &lt;SafeAreaView&gt;
  3. {loading ? (
  4. &lt;ActivityIndicator size=&quot;small&quot; color=&quot;black&quot; /&gt;
  5. ) : (
  6. &lt;FlatList
  7. data={filteredDataSource}
  8. renderItem={renderItem}
  9. ItemSeparatorComponent={ItemSeparatorView}
  10. keyExtractor={(item, index) =&gt; index.toString()}
  11. /&gt;
  12. )}
  13. &lt;/SafeAreaView&gt;
  14. &lt;/View&gt;
  15. &lt;/View&gt;

);
};

export default App;

const styles = StyleSheet.create({
contenir: {
flex: 1,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginLeft: verticalScale(10),
marginRight: verticalScale(10),
},
menuimg: { width: scale(40), height: verticalScale(40) },
logoimg: {
width: scale(60),
height: verticalScale(60),
marginTop: scale(10),
},
userimg: {
width: scale(60),
height: verticalScale(60),
marginTop: scale(10),
},
textInputStyle: {
// height: verticalScale(60),
width: scale(260),
fontSize: RFPercentage(3),
color: '#000',
fontWeight: '900',
// borderWidth: scale(2),
// paddingLeft:moderateScale(20),
// margin: scale(5),
// borderRadius:scale(20),
// borderColor: '#000',
// backgroundColor: '#FFFFFF',
},
textbox: {
alignItems: 'center',
height: verticalScale(65),
width: scale(320),
borderColor: '#000',
backgroundColor: '#FFFFFF',
borderRadius: scale(30),
borderWidth: scale(2),
paddingLeft: moderateScale(20),
margin: scale(5),
flexDirection: 'row',
justifyContent: 'space-between',
},
resulttext: {
fontSize: RFPercentage(3.7),
fontWeight: '700',
color: '#000',
// marginLeft: scale(20)
},
// scrollViewContainer: {
// justifyContent: 'space-around',
// },
dropdown2BtnStyle: {
width: scale(150),
height: verticalScale(60),
backgroundColor: '#000',
borderRadius: scale(30),
},
dropdown2BtnTxtStyle: {
color: '#FFF',
textAlign: 'center',
fontSize: RFPercentage(2.5),
fontWeight: 'bold',
},
dropdown2DropdownStyle: {
backgroundColor: '#444',
width: scale(120),
height: verticalScale(70),
borderRadius: scale(20),
// borderBottomRightRadius: 12,
},
dropdown2RowStyle: {
backgroundColor: '#000',
},
dropdown2RowTxtStyle: {
color: '#FFF',
textAlign: 'center',
},
});

  2. </details>
  3. # 答案1
  4. **得分**: 1
  5. 以下是代码的翻译部分：
  6. ```javascript
  7. import {
  8. StyleSheet,
  9. Text,
  10. View,
  11. Image,
  12. TextInput,
  13. FlatList,
  14. ActivityIndicator,
  15. SafeAreaView,
  16. } from 'react-native';
  17. import React, { useEffect, useState } from 'react';
  18. import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
  19. import { RFPercentage } from 'react-native-responsive-fontsize';
  20. import SelectDropdown from 'react-native-select-dropdown';
  21. const sortby = ['A 到 Z', '最新', '最旧'];
  22. const App = () => {
  23. const [loading, setLoading] = useState(true);
  24. const [data, setData] = useState([]);
  25. const [search, setSearch] = useState('');
  26. const [filteredDataSource, setFilteredDataSource] = useState([]);
  27. const [masterDataSource, setMasterDataSource] = useState([]);
  28. const [total, setTotalData] = useState(0);
  29. const [searchCount, setSearchCount] = useState(0);
  30. const [sortedData, setSortedData] = useState([]);
  31. useEffect(() => {
  32. fetchData();
  33. }, []);
  34. const fetchData = async () => {
  35. try {
  36. const response = await fetch('https://randomuser.me/api?results=1000');
  37. const json = await response.json();
  38. const newData = json.results;
  39. setLoading(false);
  40. setFilteredDataSource(json.results);
  41. setMasterDataSource(json.results);
  42. setTotalData(json.info.results);
  43. } catch (error) {
  44. console.error(error);
  45. }
  46. };
  47. const searchFilterFunction = (text) => {
  48. // 检查搜索文本是否不为空
  49. if (text) {
  50. // 插入的文本不为空
  51. // 过滤主数据源并更新FilteredDataSource
  52. const newData = masterDataSource.filter(function (item) {
  53. // 在搜索栏中应用过滤器
  54. const itemData = item.name.first
  55. ? item.name.first.toUpperCase()
  56. : ''.toUpperCase();
  57. const textData = text.toUpperCase();
  58. return itemData.indexOf(textData) > -1;
  59. });
  60. setFilteredDataSource(newData);
  61. setSearch(text);
  62. setSearchCount(newData.length);
  63. } else {
  64. // 插入的文本为空
  65. // 使用主数据源更新FilteredDataSource
  66. setFilteredDataSource(masterDataSource);
  67. setSearch(text);
  68. }
  69. };
  70. const renderItem = ({ item }) => (
  71. <View style={{ padding: 10 }}>
  72. <Text>姓名: {`${item.name.first} ${item.name.last}`}</Text>
  73. <Text>电子邮件: {item.email}</Text>
  74. <Text>城市: {item.location.city}</Text>
  75. <Text>州: {item.location.state}</Text>
  76. <Text>国家: {item.location.country}</Text>
  77. <Text>邮政编码: {item.location.postcode}</Text>
  78. </View>
  79. );
  80. const ItemSeparatorView = () => {
  81. return (
  82. // 列表项分隔符
  83. <View
  84. style={{
  85. height: 0.5,
  86. width: '100%',
  87. backgroundColor: '#000',
  88. }}
  89. />
  90. );
  91. };
  92. return (
  93. <View>
  94. <View style={styles.header}>
  95. <Image source={require('../assets/google.png')} style={styles.menuimg} />
  96. <Image source={require('../assets/google.png')} style={styles.logoimg} />
  97. <Image source={require('../assets/google.png')} style={styles.userimg} />
  98. </View>
  99. <View style={{ alignItems: 'center' }}>
  100. <View style={styles.textbox}>
  101. <TextInput
  102. style={styles.textInputStyle}
  103. onChangeText={(text) => searchFilterFunction(text)}
  104. value={search}
  105. focusable={true}
  106. underlineColorAndroid="transparent"
  107. placeholder="搜索"
  108. placeholderTextColor={'#000'}
  109. selectionColor="#000"
  110. />
  111. <Image
  112. source={require('../assets/google.png')}
  113. style={{ marginRight: scale(10) }}
  114. />
  115. </View>
  116. </View>
  117. <View
  118. style={{
  119. flexDirection: 'row',
  120. marginTop: verticalScale(10),
  121. justifyContent: 'space-around',
  122. alignItems: 'center',
  123. }}>
  124. <Text style={styles.resulttext}>
  125. {searchCount == 0 ? total : searchCount} 个结果
  126. </Text>
  127. <SelectDropdown
  128. data={sortby}
  129. onSelect={(selectedItem, index) => {
  130. console.log(selectedItem, index);
  131. // 在这里进行排序
  132. if (selectedItem == 'A 到 Z') {
  133. const filterThisArray = [...filteredDataSource];
  134. filterThisArray.sort((a, b) => {
  135. const nameA = a.name.first.toLowerCase();
  136. const nameB = b.name.first.toLowerCase();
  137. if (nameA < nameB) {
  138. return -1;
  139. }
  140. if (nameA > nameB) {
  141. return 1;
  142. }
  143. return 0;
  144. });
  145. setFilteredDataSource(filterThisArray);
  146. }
  147. }}
  148. defaultButtonText={'排序方式'}
  149. buttonTextAfterSelection={(selectedItem, index) => {
  150. return selectedItem;
  151. }}
  152. rowTextForSelection={(item, index) => {
  153. return item;
  154. }}
  155. buttonStyle={styles.dropdown2BtnStyle}
  156. buttonTextStyle={styles.dropdown2BtnTxtStyle}
  157. renderDropdownIcon={(isOpened) => {
  158. return isOpened ? (
  159. <>
  160. <Image
  161. source={require('../assets/google.png')}
  162. style={{
  163. width: scale(15),
  164. height: verticalScale(15),
  165. marginRight: verticalScale(10),
  166. }}
  167. />
  168. </>
  169. ) : (
  170. <>
  171. <Image
  172. source={require('../assets/google.png')}
  173. style={{
  174. width: scale(15),
  175. height: verticalScale(15),
  176. marginRight: verticalScale(10),
  177. }}
  178. />
  179. </>
  180. );
  181. }}
  182. dropdownIconPosition={'right'}
  183. dropdownStyle={styles.dropdown2DropdownStyle}
  184. rowStyle={styles.dropdown2RowStyle}
  185. rowTextStyle={styles.dropdown2RowTxtStyle}
  186. />
  187. </View>
  188. <View style={{ marginTop: scale(10) }}>
  189. <SafeAreaView>
  190. {loading ? (
  191. <ActivityIndicator size="small" color="black" />
  192. ) : (
  193. <FlatList
  194. data={filteredDataSource}
  195. renderItem={renderItem}
  196. ItemSeparatorComponent={ItemSeparatorView}
  197. keyExtractor={(item, index) => index.toString()}
  198. />
  199. )}
  200. </SafeAreaView>
  201. </View>
  202. </View>
  203. );
  204. };
  205. export default App;
  206. const styles = StyleSheet.create({
  207. contenir: {
  208. flex: 1,
  209. },
  210. header: {
  211. flexDirection: 'row',
  212. justifyContent: 'space-between',
  213. alignItems: 'center',
  214. marginLeft: verticalScale(10),
  215. marginRight: verticalScale(10),
  216. },
  217. menuimg: { width: scale(40), height: verticalScale(40) },
  218. logoimg: {
  219. width: scale(60),
  220. height: verticalScale(60),
  221. marginTop: scale(10),
  222. },
  223. userimg: {
  224. width: scale(60),
  225. height: verticalScale(60),
  226. marginTop:
  227. <details>
  228. <summary>英文:</summary>
  229. Try this code. It worked for me.

import {
StyleSheet,
Text,
View,
Image,
TextInput,
FlatList,
ActivityIndicator,
SafeAreaView,
} from 'react-native';
import React, { useEffect, useState } from 'react';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import { RFPercentage } from 'react-native-responsive-fontsize';
import SelectDropdown from 'react-native-select-dropdown';

const sortby = ['A to Z', 'Newawst', 'Oldest'];

const App = () => {
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
const [search, setSearch] = useState('');
const [filteredDataSource, setFilteredDataSource] = useState([]);
const [masterDataSource, setMasterDataSource] = useState([]);
const [total, setTotalData] = useState(0);
const [searchCount, setSearchCount] = useState(0);
const [sortedData, setSortedData] = useState([]);

  1. useEffect(() =&gt; {
  2. fetchData();
  3. }, []);
  4. const fetchData = async () =&gt; {
  5. try {
  6. const response = await fetch(&#39;https://randomuser.me/api?results=1000&#39;);
  7. const json = await response.json();
  8. const newData = json.results;
  9. setLoading(false);
  10. setFilteredDataSource(json.results);
  11. setMasterDataSource(json.results);
  12. setTotalData(json.info.results);
  13. } catch (error) {
  14. console.error(error);
  15. }
  16. };
  17. const searchFilterFunction = (text) =&gt; {
  18. // Check if searched text is not blank
  19. if (text) {
  20. // Inserted text is not blank
  21. // Filter the masterDataSource and update FilteredDataSource
  22. const newData = masterDataSource.filter(function (item) {
  23. // Applying filter for the inserted text in search bar
  24. const itemData = item.name.first
  25. ? item.name.first.toUpperCase()
  26. : &#39;&#39;.toUpperCase();
  27. const textData = text.toUpperCase();
  28. return itemData.indexOf(textData) &gt; -1;
  29. });
  30. setFilteredDataSource(newData);
  31. setSearch(text);
  32. setSearchCount(newData.length);
  33. } else {
  34. // Inserted text is blank
  35. // Update FilteredDataSource with masterDataSource
  36. setFilteredDataSource(masterDataSource);
  37. setSearch(text);
  38. }
  39. };
  40. const renderItem = ({ item }) =&gt; (
  41. &lt;View style={{ padding: 10 }}&gt;
  42. &lt;Text&gt;Name :{`${item.name.first} ${item.name.last}`}&lt;/Text&gt;
  43. &lt;Text&gt;Email :{item.email}&lt;/Text&gt;
  44. &lt;Text&gt;City :{item.location.city}&lt;/Text&gt;
  45. &lt;Text&gt;State :{item.location.state}&lt;/Text&gt;
  46. &lt;Text&gt;Country :{item.location.country}&lt;/Text&gt;
  47. &lt;Text&gt;Postcode :{item.location.postcode}&lt;/Text&gt;
  48. &lt;/View&gt;
  49. );
  50. const ItemSeparatorView = () =&gt; {
  51. return (
  52. // Flat List Item Separator
  53. &lt;View
  54. style={{
  55. height: 0.5,
  56. width: &#39;100%&#39;,
  57. backgroundColor: &#39;#000&#39;,
  58. }}
  59. /&gt;
  60. );
  61. };
  62. return (
  63. &lt;View&gt;
  64. &lt;View style={styles.header}&gt;
  65. &lt;Image source={require(&#39;../assets/google.png&#39;)} style={styles.menuimg} /&gt;
  66. &lt;Image source={require(&#39;../assets/google.png&#39;)} style={styles.logoimg} /&gt;
  67. &lt;Image source={require(&#39;../assets/google.png&#39;)} style={styles.userimg} /&gt;
  68. &lt;/View&gt;
  69. &lt;View style={{ alignItems: &#39;center&#39; }}&gt;
  70. &lt;View style={styles.textbox}&gt;
  71. &lt;TextInput
  72. style={styles.textInputStyle}
  73. onChangeText={(text) =&gt; searchFilterFunction(text)}
  74. value={search}
  75. focusable={true}
  76. underlineColorAndroid=&quot;transparent&quot;
  77. placeholder=&quot;Search&quot;
  78. placeholderTextColor={&#39;#000&#39;}
  79. selectionColor=&quot;#000&quot;
  80. /&gt;
  81. &lt;Image
  82. source={require(&#39;../assets/google.png&#39;)}
  83. style={{ marginRight: scale(10) }}
  84. /&gt;
  85. &lt;/View&gt;
  86. &lt;/View&gt;
  87. &lt;View
  88. style={{
  89. flexDirection: &#39;row&#39;,
  90. marginTop: verticalScale(10),
  91. justifyContent: &#39;space-around&#39;,
  92. alignItems: &#39;center&#39;,
  93. }}&gt;
  94. &lt;Text style={styles.resulttext}&gt;
  95. {searchCount == 0 ? total : searchCount} results
  96. &lt;/Text&gt;
  97. &lt;SelectDropdown
  98. data={sortby}
  99. // defaultValueByIndex={1}
  100. onSelect={(selectedItem, index) =&gt; {
  101. console.log(selectedItem, index);
  102. //check here
  103. if (selectedItem == &#39;A to Z&#39;) {
  104. const filterThisArray = [...filteredDataSource];
  105. filterThisArray.sort((a, b) =&gt; {
  106. const nameA = a.name.first.toLowerCase();
  107. const nameB = b.name.first.toLowerCase();
  108. if (nameA &lt; nameB) {
  109. return -1;
  110. }
  111. if (nameA &gt; nameB) {
  112. return 1;
  113. }
  114. return 0;
  115. });
  116. setFilteredDataSource(filterThisArray);
  117. }
  118. }}
  119. defaultButtonText={&#39;Sort By&#39;}
  120. buttonTextAfterSelection={(selectedItem, index) =&gt; {
  121. return selectedItem;
  122. }}
  123. rowTextForSelection={(item, index) =&gt; {
  124. return item;
  125. }}
  126. buttonStyle={styles.dropdown2BtnStyle}
  127. buttonTextStyle={styles.dropdown2BtnTxtStyle}
  128. renderDropdownIcon={(isOpened) =&gt; {
  129. return isOpened ? (
  130. &lt;&gt;
  131. &lt;Image
  132. source={require(&#39;../assets/google.png&#39;)}
  133. style={{
  134. width: scale(15),
  135. height: verticalScale(15),
  136. marginRight: verticalScale(10),
  137. }}
  138. /&gt;
  139. &lt;/&gt;
  140. ) : (
  141. &lt;&gt;
  142. &lt;Image
  143. source={require(&#39;../assets/google.png&#39;)}
  144. style={{
  145. width: scale(15),
  146. height: verticalScale(15),
  147. marginRight: verticalScale(10),
  148. }}
  149. /&gt;
  150. &lt;/&gt;
  151. );
  152. }}
  153. dropdownIconPosition={&#39;right&#39;}
  154. dropdownStyle={styles.dropdown2DropdownStyle}
  155. rowStyle={styles.dropdown2RowStyle}
  156. rowTextStyle={styles.dropdown2RowTxtStyle}
  157. /&gt;
  158. &lt;/View&gt;
  159. &lt;View style={{ marginTop: scale(10) }}&gt;
  160. &lt;SafeAreaView&gt;
  161. {loading ? (
  162. &lt;ActivityIndicator size=&quot;small&quot; color=&quot;black&quot; /&gt;
  163. ) : (
  164. &lt;FlatList
  165. data={filteredDataSource}
  166. renderItem={renderItem}
  167. ItemSeparatorComponent={ItemSeparatorView}
  168. keyExtractor={(item, index) =&gt; index.toString()}
  169. /&gt;
  170. )}
  171. &lt;/SafeAreaView&gt;
  172. &lt;/View&gt;
  173. &lt;/View&gt;
  174. );

};

export default App;

const styles = StyleSheet.create({
contenir: {
flex: 1,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginLeft: verticalScale(10),
marginRight: verticalScale(10),
},
menuimg: { width: scale(40), height: verticalScale(40) },
logoimg: {
width: scale(60),
height: verticalScale(60),
marginTop: scale(10),
},
userimg: {
width: scale(60),
height: verticalScale(60),
marginTop: scale(10),
},
textInputStyle: {
// height: verticalScale(60),
width: scale(260),
fontSize: RFPercentage(3),
color: '#000',
fontWeight: '900',
// borderWidth: scale(2),
// paddingLeft:moderateScale(20),
// margin: scale(5),
// borderRadius:scale(20),
// borderColor: '#000',
// backgroundColor: '#FFFFFF',
},
textbox: {
alignItems: 'center',
height: verticalScale(65),
width: scale(320),
borderColor: '#000',
backgroundColor: '#FFFFFF',
borderRadius: scale(30),
borderWidth: scale(2),
paddingLeft: moderateScale(20),
margin: scale(5),
flexDirection: 'row',
justifyContent: 'space-between',
},
resulttext: {
fontSize: RFPercentage(3.7),
fontWeight: '700',
color: '#000',
// marginLeft: scale(20)
},
// scrollViewContainer: {
// justifyContent: 'space-around',
// },
dropdown2BtnStyle: {
width: scale(150),
height: verticalScale(60),
backgroundColor: '#000',
borderRadius: scale(30),
},
dropdown2BtnTxtStyle: {
color: '#FFF',
textAlign: 'center',
fontSize: RFPercentage(2.5),
fontWeight: 'bold',
},
dropdown2DropdownStyle: {
backgroundColor: '#444',
width: scale(120),
height: verticalScale(70),
borderRadius: scale(20),
// borderBottomRightRadius: 12,
},
dropdown2RowStyle: {
backgroundColor: '#000',
},
dropdown2RowTxtStyle: {
color: '#FFF',
textAlign: 'center',
},
});

  2. Don&#39;t forget to handle other options as well ;)
  3. </details>

huangapple
  • 本文由 发表于 2023年6月22日 13:04:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/76528740.html
  • android
  • css
  • javascript
  • react-native
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定