javascript - React Native:如何结合 index.ios.js 和 index.android.js
问题描述
我正在使用面板模块在 React Native 中展开/折叠带有动画的面板
该库包含两个 .js 文件
index.ios.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React,{AppRegistry,StyleSheet,Text,ScrollView} from 'react-native';
import Panel from './components/Panel';
var Panels = React.createClass({
render: function() {
return (
<ScrollView style={styles.container}>
<Panel title="A Panel with short content text">
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
</Panel>
<Panel title="A Panel with long content text">
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
</Panel>
<Panel title="Another Panel">
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</Text>
</Panel>
</ScrollView>
);
}
});
var styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor : '#f4f7f9',
paddingTop : 30
},
});
AppRegistry.registerComponent('Panels', () => Panels);
index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var Panels = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Panels', () => Panels);
我想将这两个文件合并到一个文件中index.js
有没有办法可以做到这一点?我希望这个库可以在 ios 和 android 设备上运行。任何建议或意见将不胜感激提前感谢!
解决方案
解决方案
一种简单的方法是index.js
仅使用。index.js
您可以通过平台分离一些代码
为什么?
索引的优先级
index.ios.js = index.android.js > index.js
推荐阅读
- javascript - 从对象的对象中删除属性
- macos - Ammonite: Script ... 不接受参数(在 OS X 下)
- javascript - 在猫鼬中添加评论总数
- javascript - ReactJS 中的“context”和“localStorage”有什么区别?
- python - 如何使用包含整数和浮点数的元组列表定义嵌套的 Pydantic 模型?
- javascript - 根据答案不断重复使用 Inquirer.js 的提示问题?
- python - 如何在 Python Pandas 中添加关键错误异常(一些 CSV 有该列,而另一些则没有)
- reactjs - Storybook:从打字稿自动生成文档
- r - 获取“UseMethod(“mutate”)错误:将mutate应用于数据框时,没有适用于“mutate”的适用方法应用于“NULL”类的对象
- r - R中的游泳者生存图