react / react/react-native

Image component with local uri source (file://) does not render initially

Ouverte
#17,096 32 commentaires 3 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Bug Component: Image Help Wanted :octocat: Platform: Android Ran Commands
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Image components with local uri sources (file://) do not render initially. When a re-render of the component tree happens, the images get rendered.

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.9.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: 9.1 (9B55)
Android Studio: 3.0.1

Packages: (wanted => installed)
react-native: 0.51.0 (@sraka1 reports this is still an issue in 0.58.4)
react: 16.0.0

Target Platform: Android (5.0.0)

Steps to Reproduce
const image = {uri: 'http://my.bamps.online/cfs/files/images/D8Xg27puAiqjvKetD?store=normal'}
// image2 is cached version of image by react-native-cached-image
const image2 = {uri: 'file:///data/data/com.testcachedimage/cache/imagesCacheDir/my_bamps_online_e6d51c26611343fb5e8c3e493674423c3d3f3943/38baef384cbb5bcc5f6138ca0653884561f85fde.jpg'}
export default class App extends Component<{}> {
  render() {
    return (
      <View style={{backgroundColor:'#777'}}>
        <Image source={image2} style={{width: 100, height: 100}}/>
        <Image source={image2} style={{width: 300, height: 100}}/>
        <ImageBackground source={image2} style={{width: 100, height: 100}}/>
        <ImageBackground source={image2} style={{width: 300, height: 100}}/>
        <Image source={image} style={{width: 100, height: 100}}/>
        <Image source={image} style={{width: 300, height: 100}}/>
      </View>
    );
  }
}
Actual Behavior

2017-12-06_15-05-16

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la reproduction Android fournie en utilisant Image et ImageBackground avec des sources file://, puis suivez le chemin de rendu initial de ces composants. C’est terminé lorsque les images locales mises en cache s’affichent lors du premier rendu du composant sans nécessiter de nouveau rendu ultérieur de l’arbre ; vérifiez à la fois les dimensions des images et les types de composants à partir de l’exemple.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
android, javascript, react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.