I want to build an album app with react native, the main idea is to use a sectionList and show the data in an array like this:
class CustomImage extends Component{ render(){ return( <View> <Image style={styles.Img} source={this.props.imageName} /> <Text style={styles.text}>{this.props.name}</Text> </View> ); } } export default class DisplayAnImage extends Component { render() { return ( <View> <SectionList sections={[ {titile: 'small soldier', data: ["./gifs/2.gif", "./gifs/3.gif", "./gifs/4.gif"]} ]} renderItem={({item}) => <CustomImage name={item} fromWeb={false} imageName={require(item)} />} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} /> </View> ); } } Above code was indented to make it work inspirited by this answer
I have already put the gifs folder under the project folder, and if I using a static string as source={require(url)} in the Image component, things will work, but when the url came out of an array items iteration, it will not work.
How can I make this work with react native?
EDIT
Don't know if I could edit to make it more specificly, the really thing I want to do is to use a generated array like this:
function numberRange(start, end){ return new Array(end-start).fill().map((d,i) => { var url = "./gifs/" + ( i+start) + ".gif"; return require(url) }); } export default class DisplayAnImage extends Component { render() { return ( <View> <SectionList sections={[ {title: 'small soldier', data: numberRange(2,30)}, {title: 'small soldier', data: numberRange(31,60)} ]} renderItem={({item}) => <CustomImage name={item} fromWeb={false} imageName={item} />} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} /> </View> ); } } Don't know if have a way to use this array generator to make an array or I have to enter the path one by one on bare hand :-(
