Tengo una FlatList.
Quiero agregar una coma entre los elementos.
Actualmente trabajando así;
Si solo hay un artículo; Mon,
Si hay varios elementos; Mon, Tue, Wed,
Mi código;
<FlatList data={job.schedule} renderItem={({ item, index }) => ( <View style={[[Layout.center], {}]}> <Text style={[[Fonts.textInterRegular12]]}> {item.dayHuman.slice(0, 3)}{', '} </Text> </View> )} horizontal keyExtractor={item => item.id} extraData={this.state} showsVerticalScrollIndicator={false} />El código anterior tiene dos problemas.
Si solo hay un elemento, no quiero agregar una coma. Por ejemplo, Mon
Si hay varios elementos, no quiero agregar una coma al lado del último elemento. Por ejemplo Mon, Tue, Wed
¿Cómo puedo conseguir esto?
<FlatList data={job.schedule} renderItem={({ item, index }) => ( <View style={[[Layout.center], {}]}> <Text style={[[Fonts.textInterRegular12]]}> {item.dayHuman.slice(0, 3)} {index !== job.schedule.length -1 && ', '} </Text> </View> )} horizontal keyExtractor={item => item.id} extraData={this.state} showsVerticalScrollIndicator={false} />Cuando se trabaja con ReactNative FlatList , puede usar la propiedad ItemSeparatorComponent de ItemSeparatorComponent para representar un componente entre cada elemento, pero no al principio o al final de la lista.
Puede usar el accesorio ListFooterComponent de ListFooterComponent para representar algunos JSX o un componente al final de la lista.
Si necesita saber que está al final de la lista dentro de renderItem , puede verificar el index en los metadatos proporcionados a renderItem contra la longitud de data .
const data = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; export default function App() { return ( <SafeAreaView> <FlatList data={data} renderItem={({ item, index }) => { const isEnd = index === data.length - 1; return ( <View> <Text> {item}{isEnd && <Text>. </Text>} </Text> </View> ); }} horizontal keyExtractor={(item) => item.id} extraData={this.state} showsVerticalScrollIndicator={false} ItemSeparatorComponent={() => <Text>, </Text>} ListFooterComponent={() => <Text>The End!</Text>} /> </SafeAreaView> ); }creo que estas buscando esto
<FlatList data={job.schedule} renderItem={({ item, index }) => ( <View style={[[Layout.center], {}]}> <Text style={[[Fonts.textInterRegular12]]}> {item.dayHuman.slice(0, 3)}{index < job.schedule.length -1 ?', ':""} </Text> </View> )} horizontal keyExtractor={item => item.id} extraData={this.state} showsVerticalScrollIndicator={false} />