Reactjs – React Native Overlay Transparent

react-nativereactjs

I have try many times, stills can not find the solution.

In a screen, I have so many components. I separated in header and content views components.

In content components, there has map component (image), and there has other components like a people component (image).

In the map component, I want to have a transparent overlay with full screen but it only overlay with map component. In react native, there are no z-index. How can I do it?

<View>
  <View style={styles.header}>
    .....
  </View>
  <View style={styles.content}>
    <Image style={styles.map}>
       <View style={styles.overlay}>
         <Image style={styles.people} />
         <Image style={styles.destination} />
       </View>
    </Image>
  </View>
</View>

like this example which can not overlay the full screen:
https://rnplay.org/apps/wHCi_A

Best Answer

Move the overlay View to the view to the root View and make sure to add it as the last child. Set position to absolute. Something like this

const styles= StyleSheet.create({
  overlay:{
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.2)'
}); 

<View>
  <View style={styles.header}>
    .....
  </View>
  <View style={styles.content}>
    <Image style={styles.map}>
    </Image>
  </View>
  <View style={styles.overlay}>
     <Image style={styles.people} />
     <Image style={styles.destination} />
  </View>
</View>

Related Solutions

Javascript – Loop inside React JSX

Think of it like you're just calling JavaScript functions. You can't use a for loop where the arguments to a function call would go:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

See how the function tbody is being passed a for loop as an argument – leading to a syntax error.

But you can make an array, and then pass that in as an argument:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

You can basically use the same structure when working with JSX:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.

C# – Is a static variable shared across all instance

Your static variable TaxBrakets is not associated with an instance. this.TaxBrakets would not compile. All occurrences of TaxBrakets will refer to the same dictionary. In general, it's totally acceptable to use static dictionaries. This particular use seems a little funny though, but I'd need to see more code to suggest any changes.

Best Answer

Related Solutions

Javascript – Loop inside React JSX

C# – Is a static variable shared across all instance

Related Topic