React Native - Navigation + Image

Question

React Native - Navigation + Image

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

I'm having a hard time solving a problem I'm having using the react native lib navigation.

When I open a post, for example, by sending the image parameter to it, it returns me the following error message.

My code is as follows:

render() {
    const {params} = this.props.navigation.state;
    var image = require(images + params.image);
    return (
        <ScrollView style={styles.container}>
            <Image style={styles.cover} source={image}/>
            <Text>{params.title} {image}</Text>
        </ScrollView>
    );
}

Anyone who has gone through this can help me, please?

Thank you.

react-native

asked by anonymous 13.11.2017 / 00:06

2 answers

How to indicate how many equal numbers exist between two vectors? Length of jQuery does not update with append, how to solve?

score 2 · Answer 1

Hello,

This is a very common error in react-native and in JS itself for some reason require () does not work this way you can make an array of objects here popular and make a map to scroll scroll get the images of the objects from the array and then in time to show a detail screen you can pass the data of your array.

Example using array of objects + react-navigation:

render() {
  const dados = [
    {
      imagem: require('./img1.png'),
      titulo: 'Usuario 1',
    },
    {
      imagem: require('./img2.png'),
      titulo: 'Usuario 2',
    },
    {
      imagem: require('./img3.png'),
      titulo: 'Usuario 3',
    },
    {
      imagem: require('./img4.png'),
      titulo: 'Usuario 4',
    },
  ];
  return (
    <ScrollView>
      {dados.map((dados, i) => (
        <View key={i}>
          <Image source={dados.imagem} />
          <Text>{dados.title}</Text>
          <Button onPress={() => this.props.navigation.navigate('telaExemplo', {
            imagem: dados.imagem,
            titulo: dados.titulo
          })} />
        </View>
      ))}
    </ScrollView>
  )
}

score 0 · Answer 2

You can also solve the problem using Template String .

render() {
    const {params} = this.props.navigation.state;
    var image = require('${params.image}');
    return (
        <ScrollView style={styles.container}>
            <Image style={styles.cover} source={image}/>
            <Text>{params.title} {image}</Text>
        </ScrollView>
    );
}