React Native的导入导出
1、组件的导入导出方式
问1:如何导出一个组件?
export default class EIComponent extends Component{ render(){ return( <Text style = {{fontSize:20,backgroundColor:'red'}}>hello.</Text> ); } }
问2:如何在其他组件中使用导出的组件?
import HelloComponent from './HelloComponent';
2、导出一个或多个变量
问1:如何导出一个或多个变量?
export var name = '小明'; export var age = '22'; // export {name,age};
问2:如何使用导出变量?
import HelloComponent,{name,age} from './HelloComponent';
3、导入导出方法
问1:如何导出方法?
export function sum(a,b){ return a + b; }
问2:如何使用导出的方法?
import HelloComponent,{name,age,sum} from './HelloComponent';
实例代码:
导出组件、变量、方法
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View} from 'react-native'; export var name = '小明'; export var age = '22'; // export {name,age}; export default class EIComponent extends Component{ render(){ return( <Text style = {{fontSize:20,backgroundColor:'red'}}>hello.</Text> ); } } export function sum(a,b){ return a + b; }
使用导出的组件、变量、方法
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow * @lint-ignore-every XPLATJSCOPYRIGHT1 */ import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View} from 'react-native'; import HelloComponent,{name,age,sum} from './HelloComponent'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); type Props = {}; export default class App extends Component<Props> { constructor(props){ super(props); this.state =({ result:'' }) } render() { return ( <View style={styles.container}> <Text style ={styles.welcome}>名字:{name}</Text> <Text style ={styles.welcome}>年龄:{age}</Text> <Text style ={styles.welcome} onPress={()=>{ var result = sum(2,3); this.setState({ result:result }) }} >2+3={this.state.result}</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
分类:
React Native
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期