【水滴石穿】ReactNativeDemo
2024-10-08 01:56:28
这个博主他的功底算是特别棒的了，能够把一些基础的例子，通过精巧的方式布局在一个小的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}>
<FlatList
data={[
{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>
<Button
title="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}>
<FlatList
data={[
{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}}>
<TextInput
style={{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&&'
最新文章
- 极光推送和友盟推送，ios端和安卓端的后端调试设置
- 336-Palindrome Pairs
- （数学）P、NP、NPC、NP hard问题
- 【温故而知新-Javascript】使用canvas元素（第二部分）
- Subversion详解
- 模拟 POJ 2993 Emag eht htiw Em Pleh
- 5.2使用select，poll
- POJ1151+线段树+扫描线
- Android SDK 离线安装方法
- Orace数据库锁表的处理与总结<摘抄与总结一>
- Ubuntu包管理命令 dpkg、apt和aptitude
- ZOJ 1530 - Find The Multiple
- 剑指offer——从尾到头打印链表节点的值
- jqgrid-asp.net-mvc
- 常见递归问题 java
- 判断IOS、Android访问
- Windows Server 2012 R2 双网卡绑定
- MySQL新增多个字段
- goaccess iis w3c 自定义log 格式参考
- python(nmap模块、多线程模块）
热门文章