加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

搜索框和导航栏(React Native)

发布时间:2020-12-15 04:52:28 所属栏目:百科 来源:网络整理
导读:搜索框和导航栏(React Native) by 伍雪颖 'use strict';var React = require('react-native');var { AppRegistry,StyleSheet,View,TextInput,} = React;class SearchBar extends React.Component { render() { return ( View style={styles.searchRow} TextI

搜索框和导航栏(React Native)

by 伍雪颖

'use strict';
var React = require('react-native');
var {
  AppRegistry,StyleSheet,View,TextInput,} = React;


class SearchBar extends React.Component {
  render() {
    return (
      <View style={styles.searchRow}>
          <TextInput
            autoCapitalize="none"
            autoCorrect={false}
            clearButtonMode="always"
            placeholder="Please input your name..."
            style={styles.searchTextInput}
          />
        </View>
      );
  }
}


class SampleApp extends React.Component {
  render() {
    return (
      <React.NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'My App',component: SearchBar,}}/>
    );
  }
}


var styles = React.StyleSheet.create({
  container: {
    flex: 1
  },searchRow: {
    backgroundColor: '#eeeeee',paddingTop: 75,paddingLeft: 10,paddingRight: 10,paddingBottom: 10,},searchTextInput: {
    backgroundColor: 'white',borderColor: '#cccccc',borderRadius: 3,borderWidth: 1,height: 30,paddingLeft: 8,});


React.AppRegistry.registerComponent('SampleApp',function() { return SampleApp });

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读