admin管理员组

文章数量:1289868

I've just started my react native app and having some troubles. I have some experience with react but that doesnt seem to be helping much. The div surrounding the Text is meant to be my app header so Im trying to style it but for some reason it throws an error saying is NOT recognised?

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './ponents/Header';


class App extends React.Component {

return (
  <View style={styles.container}>
    
    <div>
    <Text>HELLO WORLD</Text>
    </div>
    
    
    <StatusBar style='auto' />
  </View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Thanks

I've just started my react native app and having some troubles. I have some experience with react but that doesnt seem to be helping much. The div surrounding the Text is meant to be my app header so Im trying to style it but for some reason it throws an error saying is NOT recognised?

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './ponents/Header';


class App extends React.Component {

return (
  <View style={styles.container}>
    
    <div>
    <Text>HELLO WORLD</Text>
    </div>
    
    
    <StatusBar style='auto' />
  </View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Thanks

• javascript
• html
• reactjs

Share Improve this question Follow asked Mar 2, 2021 at 16:31 Mo MiahMo Miah 34811 gold badge44 silver badges1414 bronze badges 1

• You can't add div element into react native app. Maybe you can add the pakage to use Div: npmjs./package/react-native-div – R3tep Commented Mar 2, 2021 at 16:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

divs don't exist in react-native. You should use View instead.

React Native and React are related in their structure and logic, but the tags that you use will be different. The div tag on React Native is the View Component.

Instead of using: <div>Test</div>

You should use <View><Text>Test<Text/></View>

And some others:

<button> will be <Button>
<input> will be <Input>
<form> does not exist, you should use <View>
<ul><li>Test Item</li></ul> you should use <Flatlist /> or a [].map

Like so but...

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './ponents/Header';

const App = () => {
  return (
    <View style={styles.container}>
      <div>
       <Text>HELLO WORLD</Text>
      </div>   
      <StatusBar style='auto' />
    </View>
  );
}

export default App;

const div = (props) => {
  return (
    <View>{props.children}</View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

...you should get familiar with the ponents that are already built in. You are able to extend react native to support those tags but it is wierd to do so.

You couldn't use html element inside react native. You may be use react-native-webview to load html

本文标签： javascriptHow to add div to React NativeStack Overflow