react native

储备知识

扎实的JS基础+React相关知识

核心组件

创建项目：
npm uninstall -g react-native-cli @react-native-community/cli
npx react-native init AwesomeProject
使用示例

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
}
export default App;

组件使用

文本组件

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '

标签：react,js,React,Platform,import,Native,快速,native	

From： https://www.cnblogs.com/zx529/p/17243304.html