Title attribute for react native <View>, <TouchableOpacity> same as that of <div titi-CodePudding

We are using react native for creating web UI as well. Here my requirement is to pass title attribute in <View/> or <Text/> component same as that of <div title="abc"> tag in HTML. Could someone please suggest and help me out.

CodePudding user response：

<View>
  <Text>ABC</Text>
<View/>

Something like this.

If it needs to be a variable (and it is called title):

<View>
  <Text>{title}</Text>
<View/>

Same goes for TouchableOpacity.

CodePudding user response：

What do you mean by using the title attribute for "View"? here you can find every prop that "View" accepts.

Also, you can find out which props are going to use for the other React native Components, in the same way.

I think you want to know how to send params like the title to a component that we create on our own, like a container in our app:

// Container.js
import ...
.
.
.
const Container = (props) => {
 // Destructuring the props
 const {title, children} = props;
 return (
  <View style = {styles.container}>
   <View style = {styles.header}> // header of your container
     <Text>{title}</Text> // use title here
   </View>
  {children} // body of your container
  </View>
 )
}
export default Container;
const styles = StyleSheet.create({
 // styles here
})

// Home.js
import ...
import Container from './Container.js'
.
.
.
const Home = (props) => {
 return(
  <Container title = 'Home'> // now we can send this param to our Container
  // body as Container Children goes here
  </Container>
 )
}