【水滴石穿】ReactNativeDemo

这个博主他的功底算是特别棒的了，能够把一些基础的例子，通过精巧的方式布局在一个小的demo里面
很值得我学习
放上博主的链接：https://github.com/jianiuqi/ReactNativeDemo

大概样式是这样
接下来我们来分析代码

//index.js
//根index.js引入的是src/app
/*** @format* @lint-ignore-every XPLATJSCOPYRIGHT1*/import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import App from "./src/App";AppRegistry.registerComponent(appName, () => App);

这个是main.js页面

//src/navigator/Main.js
import React, {Component} from 'react';
import {Button, Platform, StyleSheet, Text, View, Alert, Image, FlatList} from 'react-native';
import PropsDemo from "../simple/PropsDemo";
import TextInputDemo from "../widget/TextInputDemo";
import ButtonDemo from "../widget/ButtonDemo";
import SectionListDemo from "../widget/SectionListDemo";type Props = {};class Main extends Component<Props> {static navigationOptions = (navigation) => {return {title: '主页',headerStyle: {backgroundColor: '#f4511e',},headerTintColor: '#fff',headerTitleStyle: {fontWeight: 'bold',}};};render() {return (<View style={styles.container}><FlatListdata={[{key: 'Props（属性）', value: 'PropsDemo'},{key: 'State（状态）', value: 'PropsDemo2'},{key: 'State（状态）实例二', value: 'StateDemo'},{key: '使用Flexbox布局', value: 'FlexDemo'},{key: '处理文本输入', value: 'TextInputDemo'},{key: '处理触摸事件', value: 'ButtonDemo'},{key: 'Touchable使用示例', value: 'TouchableDemo'},{key: '使用滚动视图', value: 'ScrollViewDemo'},{key: '长列表数据', value: 'FlatListDemo'},{key: '分组列表Demo', value: 'SectionListDemo'},]}renderItem={({item}) => <Text style={styles.item} onPress={() => {this.props.navigation.navigate(item.value);}}>{item.key}</Text>}/></View>);}
}const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},item: {padding: 10,fontSize: 18,height: 44,},
})module.exports = Main;

//src/navigator/Setting.js
import React, {Component} from 'react';
import {Text, View} from "react-native";class SettingsScreen extends React.Component {render() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Settings!</Text></View>);}
}module.exports = SettingsScreen;

//src/navigator/Detail.js
//详情页在手机上面没有找到
import React, {Component} from 'react';
import {View,Text,StyleSheet,TouchableOpacity, Button,
} from 'react-native';class Detail extends Component {static navigationOptions = ({navigation, screenProps}) => ({headerTitle: navigation.state.params.key,//设置滑动返回的距离gestureResponseDistance: {horizontal: 300},//是否开启手势滑动返回，android 默认关闭 ios打开// gesturesEnabled: true,//设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题headerBackTitle: null,//导航栏的样式headerStyle: styles.headerStyle,//导航栏文字的样式headerTitleStyle: styles.headerTitleStyle,//返回按钮的颜色headerTintColor: 'white',//隐藏顶部导航栏// header: null,//设置顶部导航栏右边的视图  和 解决当有返回箭头时，文字不居中headerRight: (<View/>),//设置导航栏左边的视图// headerLeft: (<View/>),});render() {return (<View style={styles.container}><TouchableOpacity style={styles.button} activeOpacity={0.5}><Text style={{color: 'white'}}>跳转至带有菜单的导航栏页面</Text></TouchableOpacity><Text style={{marginTop: 10, color: 'black'}}>当前是Details页面</Text><Buttontitle="Go to Details... again"onPress={() => this.props.navigation.push('Detail', {key: 'push结果'})}/></View>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},button: {width: 240,height: 45,borderRadius: 5,alignItems: 'center',justifyContent: 'center',backgroundColor: '#4398ff',},headerStyle: {backgroundColor: '#4398ff',},headerTitleStyle: {color: 'white',//设置标题的大小fontSize: 18,//居中显示alignSelf: 'center',},
});module.exports = Detail;

//// 是这种方式直接渲染跳过去的return (<View style={styles.container}><FlatListdata={[{key: 'Props（属性）', value: 'PropsDemo'},{key: 'State（状态）', value: 'PropsDemo2'},{key: 'State（状态）实例二', value: 'StateDemo'},{key: '使用Flexbox布局', value: 'FlexDemo'},{key: '处理文本输入', value: 'TextInputDemo'},{key: '处理触摸事件', value: 'ButtonDemo'},{key: 'Touchable使用示例', value: 'TouchableDemo'},{key: '使用滚动视图', value: 'ScrollViewDemo'},{key: '长列表数据', value: 'FlatListDemo'},{key: '分组列表Demo', value: 'SectionListDemo'},]}renderItem={({item}) => <Text style={styles.item} onPress={() => {this.props.navigation.navigate(item.value);}}>{item.key}</Text>}/></View>

//src/simple/PropsDemo.js
import React, { Component } from 'react';
import { Image } from 'react-native';export default class PropsDemo extends Component {render() {let pic = {uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'};return (<Image source={pic} style={{width: 193, height: 110}} />);}
}

//src/simple/PropsDemo2.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';class Greeting extends Component {render() {return (<View style={{alignItems: 'center'}}><Text>Hello {this.props.name}!</Text></View>);}
}export default class PropsDemo2 extends Component {render() {return (<View style={{alignItems: 'center'}}><Greeting name='Rexxar' /><Greeting name='Jaina' /><Greeting name='Valeera' /></View>);}
}

//src/simple/StateDemo.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';class Blink extends Component {constructor(props) {super(props);this.state = { isShowingText: true };// 每1000毫秒对showText状态做一次取反操作setInterval(() => {this.setState(previousState => {return { isShowingText: !previousState.isShowingText };});}, 2000);}render() {// 根据当前showText的值决定是否显示text内容if (!this.state.isShowingText) {return null;}return (<Text>{this.props.text}</Text>);}
}export default class StateDemo extends Component {render() {return (<View><Blink text='I love to blink' /><Blink text='Yes blinking is so great' /><Blink text='Why did they ever take this out of HTML' /><Blink text='Look at me look at me look at me' /></View>);}
}

//src/simple/FlexDemo.js
import React, { Component } from 'react';
import { View } from 'react-native';export default class FlexDemo extends Component {render() {return (// 试试去掉父View中的`flex: 1`。// 则父View不再具有尺寸，因此子组件也无法再撑开。// 然后再用`height: 300`来代替父View的`flex: 1`试试看？<View style={{flex: 1}}><View style={{flex: 1, backgroundColor: 'powderblue'}} /><View style={{flex: 2, backgroundColor: 'skyblue'}} /><View style={{flex: 3, backgroundColor: 'steelblue'}} /><View style={{width:200, height:100, backgroundColor: 'purple'}}/></View>);}
}

//src/widget/TextInputDemo.js
import React, {Component} from 'react';
import {Text, TextInput, View} from 'react-native';export default class TextInputDemo extends Component {constructor(props) {super(props);this.state = {text: ''};}render() {return (<View style={{padding: 10}}><TextInputstyle={{height: 40}}placeholder="Type here to translate"onChangeText={(text) => this.setState({text})}/><Text style={{padding:10, fontSize:42}}>{this.state.text.split(' ').map((word) => word&&'?').join(' ')}</Text></View>);}
}

//src/widget/TouchableDemo.js
import React, {Component} from 'react';
import {Alert,Platform,StyleSheet,Text,TouchableHighlight,TouchableOpacity,TouchableNativeFeedback,TouchableWithoutFeedback,View
} from 'react-native';export default class TouchableDemo extends Component {_onPressButton() {Alert.alert('You tapped the button!')}_onLongPressButton() {Alert.alert('You long-pressed the button!')}render() {return (<View style={styles.container}><TouchableHighlight onPress={this._onPressButton} underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>TouchableHighlight</Text></View></TouchableHighlight><TouchableOpacity onPress={this._onPressButton}><View style={styles.button}><Text style={styles.buttonText}>TouchableOpacity</Text></View></TouchableOpacity><TouchableNativeFeedbackonPress={this._onPressButton}background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}><View style={styles.button}><Text style={styles.buttonText}>TouchableNativeFeedback</Text></View></TouchableNativeFeedback><TouchableWithoutFeedbackonPress={this._onPressButton}><View style={styles.button}><Text style={styles.buttonText}>TouchableWithoutFeedback</Text></View></TouchableWithoutFeedback><TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton}underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>Touchable with Long Press</Text></View></TouchableHighlight></View>);}
}const styles = StyleSheet.create({container: {paddingTop: 60,alignItems: 'center'},button: {marginBottom: 30,width: 260,alignItems: 'center',backgroundColor: '#2196F3'},buttonText: {padding: 20,color: 'white'}
})

//src/widget/ScrollViewDemo.js
import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';export default class ScrollViewDemo extends Component {render() {return (<ScrollView><Text style={{fontSize:96}}>Scroll me plz</Text><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Text style={{fontSize:96}}>If you like</Text><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Text style={{fontSize:96}}>Scrolling down</Text><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Text style={{fontSize:96}}>What's the best</Text><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Text style={{fontSize:96}}>Framework around?</Text><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /><Text style={{fontSize:80}}>React Native</Text></ScrollView>);}
}

//src/widget/FlatListDemo.js
import React, {Component} from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';export default class FlatListDemo extends Component {render() {return (<View style={styles.container}><FlatListdata={[{key: 'Devin'},{key: 'Jackson'},{key: 'James'},{key: 'Joel'},{key: 'John'},{key: 'Jillian'},{key: 'Jimmy'},{key: 'Julie'},]}renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}/></View>);}
}const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},item: {padding: 10,fontSize: 18,height: 44,},
})

//src/widget/SectionListDemo.js
import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';export default class SectionListDemo extends Component {render() {return (<View style={styles.container}><SectionListsections={[{title: 'D', data: ['Devin']},{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},]}renderItem={({item}) => <Text style={styles.item}>{item}</Text>}renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}keyExtractor={(item, index) => index}/></View>);}
}const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},sectionHeader: {paddingTop: 2,paddingLeft: 10,paddingRight: 10,paddingBottom: 2,fontSize: 14,fontWeight: 'bold',backgroundColor: 'rgba(247,247,247,1.0)',},item: {padding: 10,fontSize: 18,height: 44,},
})

呃呃呃呃，我们下一篇见～

转载于:https://www.cnblogs.com/smart-girl/p/10894409.html

【水滴石穿】ReactNativeDemo相关推荐

做人晶莹剔透，做事水滴石穿
看了余世维的讲座,在最后的闭幕中,出现了这样的文字:做人晶莹剔透,做事水滴石穿.晶莹剔透意味着诚信光明,水滴石穿意味着用心坚持.让我心一惊,真是说得太对了.我要用他来鼓舞激励自己. 现在很多人都很虚伪 ...
Redis 水滴石穿之（六）哨兵
Redis-水滴石穿之(六)哨兵目录 Redis-水滴石穿之(六)哨兵一.概述二.哨兵应用 2.1.主从及哨兵配置 2.2.依次启动主.从.哨兵 2.3.主从节点验证 2.4.故障迁移演示 2. ...
水滴石穿、坚持不懈，必能有所精进
在跟随这门课程学习的过程中,我增长了很多大数据相关的知识,对于大数据技术和相关开源组件,也有了更深的了解.今天正好可以借着这个机会,来记录下自己的一点心得体会,也跟你分享一下我的学习思路,咱们一起聊一 ...
2.4 找准位置，水滴石穿
考试时的方法多数不是"灵机一动"现场创造出来的,而是平时刻苦训练中积累出来的. 俗话说得好,"水滴石穿",但"水滴未必石穿" ...
Redis 水滴石穿之（四）持久化
Redis 水滴石穿之(四)持久化目录 Redis 水滴石穿之(四)持久化一.概述二.RDB 1.RDB快照触发时机 1.1 手动触发 (save & bgsave) 1.2 自动触发 ...
不会-Redis 水滴石穿之（七）集群
Redis 水滴石穿之(七)集群目录 Redis 水滴石穿之(七)集群一.概述二.集群搭建 2.1.手动搭建集群 1.修改配置文件 2.启动节点 3.节点握手 4.分配槽 5.指定主从关系 2. ...
期货开户水滴石穿知行合一
上千年来,人生价值一直都在改变,唯一没有改变的就是价值本身的规律.如果从另一个角度去观察,或许会有另外一番心境,有句老话叫做后生可畏,也许后生并不可畏,真正让人可畏可敬的或许是代表一个时代的思想和精神 ...
2022-1-14持之以恒，水滴石穿
1.读到曾文正公修身之难皆因无恒,刚过30的我深有体会,回想往事从幼时读书学习开始总是3分钟热度,学习总浮于表面,老师布置的作业草草了事,出社会参加工作后书倒是买了一大堆,每本书总是翻完几页又想去读其 ...
水滴石穿oracle之脚本安装
水滴石穿oracle之脚本安装上一篇文章带领大家在redhat5.5上一步一步安装了oracle10g,并且详细讲解了每一步操作,图文并茂相信可以帮到一些有需要朋友! 成功动手搭建过一次的朋友们有没 ...

【水滴石穿】ReactNativeDemo

【水滴石穿】ReactNativeDemo相关推荐

最新文章

热门文章