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

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

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的顺序设置，那么我该如何在我的代码中执行这个功能？

我尝试了以下代码：

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

      // const sorted = [...sortedData, ...newData].sort((a, b) => {
      //   const lastNameA = a.name.first.toLowerCase();
      //   const lastNameB = b.name.first.toLowerCase();
      //   if (lastNameA < lastNameB) return -1;
      //   if (lastNameA > lastNameB) return 1;
      //   return 0;
      // });
      // setSortedData(sorted);

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

我该如何做到这一点？

代码:

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;

      setLoading(false);
      setFilteredDataSource(json.results);
      setMasterDataSource(json.results);
      setTotalData(json.info.results);
    } catch (error) {
      console.error(error);
    }
  };

  const searchFilterFunction = (text) => {
    // 检查搜索文本是否不为空
    if (text) {
      // 插入的文本不为空
      // 过滤masterDataSource并更新FilteredDataSource
      const newData = masterDataSource.filter(function (item) {
        // 在搜索栏中应用过滤器
        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 {
      // 插入的文本为空
      // 使用masterDataSource更新FilteredDataSource
      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>

      <View style={{ marginTop: scale(10) }}>
        <SafeAreaView>
          {loading ? (
            <ActivityIndicator size="small" color="black" />
          ) : (
            <FlatList
              data={filtered

<details>
<summary>英文:</summary>

I&#39;m creating a screen that can be displayed 1000 data it comes from the API

here is image

[![enter image description here](https://i.stack.imgur.com/ErbDD.png)](https://i.stack.imgur.com/ErbDD.png)

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 

I&#39;m try this code

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

  // const sorted = [...sortedData, ...newData].sort((a, b) =&gt; {
//   const lastNameA = a.name.first.toLowerCase();
//   const lastNameB = b.name.first.toLowerCase();
//   if (lastNameA &lt; lastNameB) return -1;
//   if (lastNameA &gt; lastNameB) return 1;
//   return 0;
// });
// setSortedData(sorted);


but its not working when I&#39;m selecting A to Z order list in to drop down box
how can I do that ?
**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;

  setLoading(false);
setFilteredDataSource(json.results);
setMasterDataSource(json.results);
setTotalData(json.info.results);
} catch (error) {
console.error(error);
}

};

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>

  &lt;View style={{ marginTop: scale(10) }}&gt;
&lt;SafeAreaView&gt;
{loading ? (
&lt;ActivityIndicator size=&quot;small&quot; color=&quot;black&quot; /&gt;
) : (
&lt;FlatList
data={filteredDataSource}
renderItem={renderItem}
ItemSeparatorComponent={ItemSeparatorView}
keyExtractor={(item, index) =&gt; index.toString()}
/&gt;
)}
&lt;/SafeAreaView&gt;
&lt;/View&gt;
&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',
},
});


</details>
# 答案1
**得分**: 1
以下是代码的翻译部分：
```javascript
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 到 Z', '最新', '最旧'];
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;
setLoading(false);
setFilteredDataSource(json.results);
setMasterDataSource(json.results);
setTotalData(json.info.results);
} catch (error) {
console.error(error);
}
};
const searchFilterFunction = (text) => {
// 检查搜索文本是否不为空
if (text) {
// 插入的文本不为空
// 过滤主数据源并更新FilteredDataSource
const newData = masterDataSource.filter(function (item) {
// 在搜索栏中应用过滤器
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 {
// 插入的文本为空
// 使用主数据源更新FilteredDataSource
setFilteredDataSource(masterDataSource);
setSearch(text);
}
};
const renderItem = ({ item }) => (
<View style={{ padding: 10 }}>
<Text>姓名: {`${item.name.first} ${item.name.last}`}</Text>
<Text>电子邮件: {item.email}</Text>
<Text>城市: {item.location.city}</Text>
<Text>州: {item.location.state}</Text>
<Text>国家: {item.location.country}</Text>
<Text>邮政编码: {item.location.postcode}</Text>
</View>
);
const ItemSeparatorView = () => {
return (
// 列表项分隔符
<View
style={{
height: 0.5,
width: '100%',
backgroundColor: '#000',
}}
/>
);
};
return (
<View>
<View style={styles.header}>
<Image source={require('../assets/google.png')} style={styles.menuimg} />
<Image source={require('../assets/google.png')} style={styles.logoimg} />
<Image source={require('../assets/google.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="搜索"
placeholderTextColor={'#000'}
selectionColor="#000"
/>
<Image
source={require('../assets/google.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} 个结果
</Text>
<SelectDropdown
data={sortby}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
// 在这里进行排序
if (selectedItem == 'A 到 Z') {
const filterThisArray = [...filteredDataSource];
filterThisArray.sort((a, b) => {
const nameA = a.name.first.toLowerCase();
const nameB = b.name.first.toLowerCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
setFilteredDataSource(filterThisArray);
}
}}
defaultButtonText={'排序方式'}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem;
}}
rowTextForSelection={(item, index) => {
return item;
}}
buttonStyle={styles.dropdown2BtnStyle}
buttonTextStyle={styles.dropdown2BtnTxtStyle}
renderDropdownIcon={(isOpened) => {
return isOpened ? (
<>
<Image
source={require('../assets/google.png')}
style={{
width: scale(15),
height: verticalScale(15),
marginRight: verticalScale(10),
}}
/>
</>
) : (
<>
<Image
source={require('../assets/google.png')}
style={{
width: scale(15),
height: verticalScale(15),
marginRight: verticalScale(10),
}}
/>
</>
);
}}
dropdownIconPosition={'right'}
dropdownStyle={styles.dropdown2DropdownStyle}
rowStyle={styles.dropdown2RowStyle}
rowTextStyle={styles.dropdown2RowTxtStyle}
/>
</View>
<View style={{ marginTop: scale(10) }}>
<SafeAreaView>
{loading ? (
<ActivityIndicator size="small" color="black" />
) : (
<FlatList
data={filteredDataSource}
renderItem={renderItem}
ItemSeparatorComponent={ItemSeparatorView}
keyExtractor={(item, index) => index.toString()}
/>
)}
</SafeAreaView>
</View>
</View>
);
};
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:
<details>
<summary>英文:</summary>
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([]);

useEffect(() =&gt; {
fetchData();
}, []);
const fetchData = async () =&gt; {
try {
const response = await fetch(&#39;https://randomuser.me/api?results=1000&#39;);
const json = await response.json();
const newData = json.results;
setLoading(false);
setFilteredDataSource(json.results);
setMasterDataSource(json.results);
setTotalData(json.info.results);
} catch (error) {
console.error(error);
}
};
const searchFilterFunction = (text) =&gt; {
// 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()
: &#39;&#39;.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) &gt; -1;
});
setFilteredDataSource(newData);
setSearch(text);
setSearchCount(newData.length);
} else {
// Inserted text is blank
// Update FilteredDataSource with masterDataSource
setFilteredDataSource(masterDataSource);
setSearch(text);
}
};
const renderItem = ({ item }) =&gt; (
&lt;View style={{ padding: 10 }}&gt;
&lt;Text&gt;Name :{`${item.name.first} ${item.name.last}`}&lt;/Text&gt;
&lt;Text&gt;Email :{item.email}&lt;/Text&gt;
&lt;Text&gt;City :{item.location.city}&lt;/Text&gt;
&lt;Text&gt;State :{item.location.state}&lt;/Text&gt;
&lt;Text&gt;Country :{item.location.country}&lt;/Text&gt;
&lt;Text&gt;Postcode :{item.location.postcode}&lt;/Text&gt;
&lt;/View&gt;
);
const ItemSeparatorView = () =&gt; {
return (
// Flat List Item Separator
&lt;View
style={{
height: 0.5,
width: &#39;100%&#39;,
backgroundColor: &#39;#000&#39;,
}}
/&gt;
);
};
return (
&lt;View&gt;
&lt;View style={styles.header}&gt;
&lt;Image source={require(&#39;../assets/google.png&#39;)} style={styles.menuimg} /&gt;
&lt;Image source={require(&#39;../assets/google.png&#39;)} style={styles.logoimg} /&gt;
&lt;Image source={require(&#39;../assets/google.png&#39;)} style={styles.userimg} /&gt;
&lt;/View&gt;
&lt;View style={{ alignItems: &#39;center&#39; }}&gt;
&lt;View style={styles.textbox}&gt;
&lt;TextInput
style={styles.textInputStyle}
onChangeText={(text) =&gt; searchFilterFunction(text)}
value={search}
focusable={true}
underlineColorAndroid=&quot;transparent&quot;
placeholder=&quot;Search&quot;
placeholderTextColor={&#39;#000&#39;}
selectionColor=&quot;#000&quot;
/&gt;
&lt;Image
source={require(&#39;../assets/google.png&#39;)}
style={{ marginRight: scale(10) }}
/&gt;
&lt;/View&gt;
&lt;/View&gt;
&lt;View
style={{
flexDirection: &#39;row&#39;,
marginTop: verticalScale(10),
justifyContent: &#39;space-around&#39;,
alignItems: &#39;center&#39;,
}}&gt;
&lt;Text style={styles.resulttext}&gt;
{searchCount == 0 ? total : searchCount} results
&lt;/Text&gt;
&lt;SelectDropdown
data={sortby}
// defaultValueByIndex={1}
onSelect={(selectedItem, index) =&gt; {
console.log(selectedItem, index);
//check here
if (selectedItem == &#39;A to Z&#39;) {
const filterThisArray = [...filteredDataSource];
filterThisArray.sort((a, b) =&gt; {
const nameA = a.name.first.toLowerCase();
const nameB = b.name.first.toLowerCase();
if (nameA &lt; nameB) {
return -1;
}
if (nameA &gt; nameB) {
return 1;
}
return 0;
});
setFilteredDataSource(filterThisArray);
}
}}
defaultButtonText={&#39;Sort By&#39;}
buttonTextAfterSelection={(selectedItem, index) =&gt; {
return selectedItem;
}}
rowTextForSelection={(item, index) =&gt; {
return item;
}}
buttonStyle={styles.dropdown2BtnStyle}
buttonTextStyle={styles.dropdown2BtnTxtStyle}
renderDropdownIcon={(isOpened) =&gt; {
return isOpened ? (
&lt;&gt;
&lt;Image
source={require(&#39;../assets/google.png&#39;)}
style={{
width: scale(15),
height: verticalScale(15),
marginRight: verticalScale(10),
}}
/&gt;
&lt;/&gt;
) : (
&lt;&gt;
&lt;Image
source={require(&#39;../assets/google.png&#39;)}
style={{
width: scale(15),
height: verticalScale(15),
marginRight: verticalScale(10),
}}
/&gt;
&lt;/&gt;
);
}}
dropdownIconPosition={&#39;right&#39;}
dropdownStyle={styles.dropdown2DropdownStyle}
rowStyle={styles.dropdown2RowStyle}
rowTextStyle={styles.dropdown2RowTxtStyle}
/&gt;
&lt;/View&gt;
&lt;View style={{ marginTop: scale(10) }}&gt;
&lt;SafeAreaView&gt;
{loading ? (
&lt;ActivityIndicator size=&quot;small&quot; color=&quot;black&quot; /&gt;
) : (
&lt;FlatList
data={filteredDataSource}
renderItem={renderItem}
ItemSeparatorComponent={ItemSeparatorView}
keyExtractor={(item, index) =&gt; index.toString()}
/&gt;
)}
&lt;/SafeAreaView&gt;
&lt;/View&gt;
&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',
},
});


Don&#39;t forget to handle other options as well ;)
</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:

确定