初识react native 练习记录

慢慢找一下网上的学习资料，慢慢学习适应react-native 开发进程，希望每天都有进步，越来越有知识

初识react native 练习记录

代码例子：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TextInput,
  TouchableNativeFeedback
} from 'react-native';

class ss extends Component {
  render() {
    var Dimensions = require('Dimensions');
    var ScreenWidth = Dimensions.get('window').width;
    var ScreenHeight = Dimensions.get('window').height;
    var ScreenScale = Dimensions.get('window').scale;

    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };

    let picQQ = {
      uri: 'https://img1.360buyimg.com/n6/jfs/t2335/36/2385650680/120318/7d5a8eae/57040a30Nf9dd5d4a.jpg'
    };

    let picMeinv = {
      uri: 'https://img11.360buyimg.com/n2/s100x100_jfs/t3940/42/581305830/189886/14ccb604/5853e0c5N18941659.jpg'
    };

    return (
      <ScrollView style={styles.mainStyle}>
        <View style={[styles.flex, styles.topStaus]}>
            <Search />
        </View>

        <View style={styles.container}>

          <View style={styles.container}>
            <Text style={styles.welcome}>
              React Native 深海遨游!
        </Text>
            <Text style={styles.welcome}>
              屏幕宽高比：{Math.floor(ScreenWidth)} ： {Math.floor(ScreenHeight)} {'\n'}
              缩放比：{ScreenScale} {/* 别忘记加 */}
            </Text>

          </View>

          <Text style={styles.welcome}> 广州市驴车信息科技有限公司 :{'\n'} </Text>
          <Text style={styles.instructions}>
            To get started, edit index.android.js
          </Text>

          <Text style={styles.instructions}>
            Double tap R on your keyboard to reload,{'\n'}
            Shake or press menu button for dev menu
          </Text>
          <View style={{ width: 70 }}>
            <Image source={require('./img/ddd.jpg')} style={{ flex: 1, alignSelf: 'center', width: 400 }} />
            <Text style={{ marginTop: 5, alignSelf: 'center', fontSize: 11, color: '#555555', textAlign: 'center' }}>丽人</Text>
          </View>
          
          <Image source={picQQ} style={{ flex: 1, width: 240, height: 240, paddingLeft: 10, paddingRight: 10, margin: 10 }} />
          <Image source={pic} style={{ flex: 1, width: 400, height: 110, paddingLeft: 10, paddingRight: 10, margin: 10 }} />
          <Image source={picMeinv} style={{ flex: 1, width: 400, height: 110, paddingLeft: 10, paddingRight: 10, margin: 10 }} />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'blue',
    fontWeight: '900',
    borderColor: 'green',
    borderWidth: 2,
    borderRadius: 5,
    padding: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },

  /* 输入框开始 */
  flex: {
    flex: 1,
  },
  green: {
    backgroundColor: '#cd2d1c'
  },

  flexDirection: {
    flexDirection: 'row',
  },
  topStaus: {
    margin: 10,
    width:400
  },

  inputHeight: {
    height: 45,
  },

  inputs: {
    height: 45,
    borderWidth: 1,
    marginLeft: 5,
    paddingLeft: 5,
    borderColor: '#CCC',
    borderRadius: 4,
  },

  btn: {
    width: 55,
    marginLeft: -5,
    marginRight: 5,
    backgroundColor: '#23bfff',
    height: 45,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,

  },

  search: {
    color: '#fff',
    fontSize: 15,
    fontWeight: 'bold',
  },

  result: {
    marginTop: 1,
    marginRight: 5,
    marginLeft: 5,
    height: 200,
    borderColor: '#ccc',
    borderTopWidth: 1,

  },

  item: {
    fontSize: 16,
    padding: 5,
    paddingTop: 10,
    paddingBottom: 10,
    borderWidth: 1,
    borderColor: '#ddd',
    borderTopWidth: 0,
  }
  /* 输入框结束 */

});


/* 输入框js业务处理开始 */
var Search = React.createClass({

  //初始化方法
  getInitialState: function () {
    return {
      show: false
    };
  },

  //获取value值调用的方法
  getValue: function (text) {
    var value = text;
    this.setState({
      show: true,
      value: value
    });
  },

  //隐藏
  hide: function (val) {
    this.setState({
      show: false,
      value: val
    });
  },

  render: function () {
    return (
      <View style={[styles.flex]}>
        <View style={[styles.flexDirection, styles.inputHeight]}>
          <View style={styles.flex}>
            <TextInput style={styles.inputs}
              returnKeyType="search"
              placeholder="请输入搜索关键字"
              onEndEditing={this.hide.bind(this, this.state.value)}
              value={this.state.value}
              onChangeText={this.getValue} />
          </View>
          <View style={styles.btn}>
            <Text style={styles.search} onPress={this.hide.bind(this, this.state.value)}>搜索</Text>
          </View>
        </View>

        {/* //结果列表 */}
        {this.state.show ?
          <View style={[styles.result]}>
            <Text onPress={this.hide.bind(this, this.state.value + '街')}
              style={styles.item}
              numberOfLines={1}>{this.state.value}街</Text>
            <Text onPress={this.hide.bind(this, this.state.value + '商厦')}
              style={styles.item}
              numberOfLines={1}>{this.state.value}商厦</Text>
            <Text onPress={this.hide.bind(this, 111 + this.state.value + '超市')}
              style={styles.item}
              numberOfLines={1}>111{this.state.value}超市</Text>
            <Text onPress={this.hide.bind(this, this.state.value + '车站')}
              style={styles.item}
              numberOfLines={1}>{this.state.value}车站</Text>
            <Text onPress={this.hide.bind(this, '办公' + this.state.value + '大厦')}
              style={styles.item}
              numberOfLines={1}>办公{this.state.value}大厦</Text>
          </View>
          : null
        }
      </View>
    );
  }

});
/* 输入框js业务处理结束*/

AppRegistry.registerComponent('ss', () => ss);

关于alert和androidToast使用

初识react native 练习记录

例子：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TextInput,
  Alert,
  ToastAndroid,
  TouchableHighlight,
  TouchableNativeFeedback
} from 'react-native';

class CustomButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

class ss extends Component {
  render() {
    var Dimensions = require('Dimensions');
    var ScreenWidth = Dimensions.get('window').width;
    var ScreenHeight = Dimensions.get('window').height;
    var ScreenScale = Dimensions.get('window').scale;

    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };

    let picQQ = {
      uri: 'https://img1.360buyimg.com/n6/jfs/t2335/36/2385650680/120318/7d5a8eae/57040a30Nf9dd5d4a.jpg'
    };

    let picMeinv = {
      uri: 'https://img11.360buyimg.com/n2/s100x100_jfs/t3940/42/581305830/189886/14ccb604/5853e0c5N18941659.jpg'
    };

    return (
      <ScrollView style={styles.mainStyle}>

        <View style={[styles.flex, styles.topStaus]}>
          <Search />
        </View>

        <View style={styles.container}>

          <View style={styles.container}>
            <Text style={styles.welcome}>
              React Native 深海遨游!
        </Text>
            <Text style={styles.welcome}>
              屏幕宽高比：{Math.floor(ScreenWidth)} ： {Math.floor(ScreenHeight)} {'\n'}
              缩放比：{ScreenScale} {/* 别忘记加 */}
            </Text>

          </View>

          <Text style={styles.welcome}> 广州市驴车信息科技有限公司 :{'\n'} </Text>
          <Text style={styles.instructions}>
            To get started, edit index.android.js
          </Text>

          <Text style={styles.instructions}>
            Double tap R on your keyboard to reload,{'\n'}
            Shake or press menu button for dev menu
          </Text>
          <View style={{ width: 70 }}>
            <Image source={require('./img/ddd.jpg')} style={{ flex: 1, alignSelf: 'center', width: 400 }} />
            <Text style={{ marginTop: 5, alignSelf: 'center', fontSize: 11, color: '#555555', textAlign: 'center' }}>丽人</Text>
          </View>

          <Image source={picQQ} style={{ flex: 1, width: 240, height: 240, paddingLeft: 10, paddingRight: 10, margin: 10 }} />
          <Image source={pic} style={{ flex: 1, width: 400, height: 110, paddingLeft: 10, paddingRight: 10, margin: 10 }} />
          <Image source={picMeinv} style={{ flex: 1, width: 400, height: 110, paddingLeft: 10, paddingRight: 10, margin: 10 }} />

          <View>
            <Text style={{ height: 30, color: 'black', margin: 8 }}>
              弹出框实例
        </Text>
            <CustomButton text='点击弹出默认Alert'
              onPress={() => Alert.alert('温馨提醒', '确定退出吗?')}
            />
            <CustomButton text='点击弹出两个按钮的Alert'
              onPress={() => Alert.alert('温馨提醒', '确定退出吗?', [
                { text: '取消', onPress: () => ToastAndroid.show('你点击了取消~', ToastAndroid.SHORT) },
                { text: '确定', onPress: () => ToastAndroid.show('你点击了确定~', ToastAndroid.SHORT) }
              ])}
            />
            <CustomButton text='点击弹出三个按钮的Alert'
              onPress={() => Alert.alert('温馨提醒', '确定退出吗?', [
                { text: 'One', onPress: () => ToastAndroid.show('你点击了One~', ToastAndroid.SHORT) },
                { text: 'Two', onPress: () => ToastAndroid.show('你点击了Two~', ToastAndroid.SHORT) },
                { text: 'Three', onPress: () => ToastAndroid.show('你点击了Three~', ToastAndroid.SHORT) }
              ])}
            />
          </View>

        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'blue',
    fontWeight: '900',
    borderColor: 'green',
    borderWidth: 2,
    borderRadius: 5,
    padding: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },

  /* 输入框开始 */
  flex: {
    flex: 1,
  },
  green: {
    backgroundColor: '#cd2d1c'
  },

  flexDirection: {
    flexDirection: 'row',
  },
  topStaus: {
    margin: 10,
    width: 400
  },

  inputHeight: {
    height: 45,
  },

  inputs: {
    height: 45,
    borderWidth: 1,
    marginLeft: 5,
    paddingLeft: 5,
    borderColor: '#CCC',
    borderRadius: 4,
  },

  btn: {
    width: 55,
    marginLeft: -5,
    marginRight: 5,
    backgroundColor: '#23bfff',
    height: 45,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,

  },

  search: {
    color: '#fff',
    fontSize: 15,
    fontWeight: 'bold',
  },

  result: {
    marginTop: 1,
    marginRight: 5,
    marginLeft: 5,
    height: 200,
    borderColor: '#ccc',
    borderTopWidth: 1,

  },

  item: {
    fontSize: 16,
    padding: 5,
    paddingTop: 10,
    paddingBottom: 10,
    borderWidth: 1,
    borderColor: '#ddd',
    borderTopWidth: 0,
  },
  /* 输入框结束 */
  /* alert */
  button: {
    margin: 5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  }
  /* alert -end */
});


/* 输入框js业务处理开始 */
var Search = React.createClass({

  //初始化方法
  getInitialState: function () {
    return {
      show: false
    };
  },

  //获取value值调用的方法
  getValue: function (text) {
    var value = text;
    this.setState({
      show: true,
      value: value
    });
  },

  //隐藏
  hide: function (val) {
    this.setState({
      show: false,
      value: val
    });
  },

  render: function () {
    return (
      <View style={[styles.flex]}>
        <View style={[styles.flexDirection, styles.inputHeight]}>
          <View style={styles.flex}>
            <TextInput style={styles.inputs}
              returnKeyType="search"
              placeholder="请输入搜索关键字"
              onEndEditing={this.hide.bind(this, this.state.value)}
              value={this.state.value}
              onChangeText={this.getValue} />
          </View>
          <View style={styles.btn}>
            <Text style={styles.search} onPress={this.hide.bind(this, this.state.value)}>搜索</Text>
          </View>
        </View>

        {/* //结果列表 */}
        {this.state.show ?
          <View style={[styles.result]}>
            <Text onPress={this.hide.bind(this, this.state.value + '街')}
              style={styles.item}
              numberOfLines={1}>{this.state.value}街</Text>
            <Text onPress={this.hide.bind(this, this.state.value + '商厦')}
              style={styles.item}
              numberOfLines={1}>{this.state.value}商厦</Text>
            <Text onPress={this.hide.bind(this, 111 + this.state.value + '超市')}
              style={styles.item}
              numberOfLines={1}>111{this.state.value}超市</Text>
            <Text onPress={this.hide.bind(this, this.state.value + '车站')}
              style={styles.item}
              numberOfLines={1}>{this.state.value}车站</Text>
            <Text onPress={this.hide.bind(this, '办公' + this.state.value + '大厦')}
              style={styles.item}
              numberOfLines={1}>办公{this.state.value}大厦</Text>
          </View>
          : null
        }
      </View>
    );
  }

});
/* 输入框js业务处理结束*/

/* alert使用 */
/* alert使用-end */

AppRegistry.registerComponent('ss', () => ss);

初识react native 练习记录

继续阅读

React-Native中的FlatList学习记录（三）之keyExtractor值不唯一造成的错误

React Native 指定页面物理返回监听

react-navigation对android原生的返回键的接管

react-native 监听手机物理按键（音量键）react-native 监听手机音量按键（结合原生安卓）

React Native 截取后端数据返回Html标签中的值

react-native 模仿网易云音乐实现react-native 模仿网易云音乐实现

第一次使用react-native后的总结

[RN]一个模版

react native android 高德地图原生代码编写react native android 高德地图原生代码编写

react native学习笔记24——Modal实现自定义弹出对话框

React-Native自定义PopupWindow实现

react-native 真机打开开发者菜单adb命令

【转】关于React Navigation的一些使用技巧一、开源库介绍二、react-navigation使用三、DrawerNavigator实现抽屉导航四、自定义react-navigation五、效果图

react-native学习(1)

macos 升级 react-native 报错

setState详解