问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
类似于微信点进会话这种状态，进去后视图默认在最底部
我在组件componentDidMount里调用组件的scrollToEnd方法，但是没有效果，只有在有点击事件那里调用才有用。想让他默认处在最底部而不用额外的操作去触发，请问该怎么搞？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你可以这样试试：
监听ScrollView的onContentSizeChange事件，在回调中触发scrollToEnd()
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：转载请标明出处：本文出自:(一)前言& & &&&【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:&& & & &现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等)，今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非常基础的组件View。&&&&&&&& 刚创建的React Native技术交流3群(),React Native技术交流4群()，请不要重复加群！欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!(二)View组件介绍&&&&&&&& View作为创建UI时候的最基础，最常用的组件。这边的View组件是支持FlexBox布局()，CSS样式以及相关触摸处理的容器组件。该组件我们可以嵌套在其他视图View里边，并且可以包含很多种类型的子视图。在Web,Android，iOS 三种平台上面该View视图可以对应平台中的三种原生视图，其中iOS对于UIView，Web端对应&div&标签，Android对于android.view。下面我们来看一个比较简单的实例:'use strict';
var React = require('react-native');
AppRegistry,
var TestText = React.createClass({
render: function() {
&View style={{flexDirection:'row',padding:20,height:100}}&
&View style={{backgroundColor:'red',flex:1}}&
});上述例子,我们这般首先创建了一个View，该View高度为100 ，但是该View的padding为20，所以整体效果如下:如果把padding修改成margin:20的话，那么是效果如下:这个相信做过CSS ,原生布局开发的话，大家应该都能看得懂的。&&&&&& 其实React Native开发，View设计的时候，也支持我们采用StyleSheet来进行书写控件的的布局，这样的话，我们的代码会更加的清晰以及便于维护了。其实React Native开发也更加推荐这种方式，下面我们采用StyleSheet来实现一下:'use strict';
var React = require('react-native');
AppRegistry,
StyleSheet,
var TestText = React.createClass({
render: function() {
&View style={styles.first_view}&
&View style={styles.second_view}&
var styles = StyleSheet.create({
first_view:{
flexDirection:'row',
height:100,
padding:20
second_view: {
backgroundColor:'red',
AppRegistry.registerComponent('TestText', () =& TestText);以上的代码我们发现使用StyleSheet，进行创建相关styles，然后赋值给styles对象，在控件中直接styles对象进行使用即可。还是比较OK的。(三)View属性方法介绍& View属性方法介绍如下:
属性Or方法
accessibilityLabel
accessible
当为trues时，表示该元素是可以进行访问，默认情况下
所有可触摸的元素控件都是可以访问的
onAccessibilityTap
该党accessible有true的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势
当组件的布局发生变动的时候，会自动调用下面的方法:
{nativeEvent:
{ layout: {x, y, width, height}}}。该事件当重新计算布局的时候会立即进行触发，不过界面可能不会立即刷新，特别当布局动画正在加载中的时候。
onMagicTap
当accessible为true的时候，当用户双指点击(Magic Tap)的时候，进行触发 其他的一些方法如下(下面很多是关于事件响应者链的，基本都是比较简单的，就不着重讲解的，有兴趣大家都可以去测试一下):onMoveShouldSetResponder，onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,onResponderReject,onResponderRelease,onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,pointerEvents enum('box-none', 'none', 'box-only', 'auto')(触摸事件是否可以进行穿透控件View);removeClippedSubviews:该控件由于进行优化性能，尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多，已经超过父容器，并且子视图和付容器视图都有overflow:hidden风格样式。【注】关于上面一些方法的具体使用，后面在讲到事件响应者的时候会进行着重讲解。(四)View风格Style介绍&&&&&&&& 在React Native中的Style风格布局，其实和CSS样式有很多相似的地方，这边介绍一下:
&Style标签
弹性布局()
transforms
动画属性()
backfaceVisibility
enum('visible',
'hidden')定义界面翻转的时候是否可见
backgroundColor
borderColor
边跨颜色,这边几个就是代表上下左右变宽的颜色
borderTopColor,borderRightColor,borderBottomColor,borderLeftColor
borderRadius
边框圆角大小，其他几个是上下左右边框的圆角.borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,
borderBottomRightRadius
borderStyle
边框线的风格,这个和CSS样式一样的,enum('solid', 'dotted', 'dashed')
borderWidth
边框宽度，另外四个是上下左右的边框宽度:borderTopWidth，borderRightWidth，borderBottomWidth，borderLeftWidth
设置透明度
设置内容超过容器显示还是隐藏
高度，设置Z轴，可以产生立体效果
& 下面是几个特殊的属性，这边直接介绍所有平台通用以及只在Android平台有效果的属性①.testID& (全平台)&&&& 可以根据该testID在测试的时候定位该View②:accessibilityComponentType(android平台)&&&& 定义是否该UI组件和原生组件一致化处理③.accessibilityLiveRegion& enum('none','polite','assertive')&(android平台)&&& 该当View发生更新时候的，是否需要通过用户，不过该只对Android4.4以及以上的平台设备有效果④.collapsable (android平台)&&& 布局合并优化使用⑤.importantForAccessibility enum('auto','yes', 'no', 'no-hide-descendants') (android平台)&&& 设置视图响应事件等级⑥.needsOffscreenAlphaCompositing&(android平台)&&&& 设置View是否需要渲染和半透明度效果处理的先后次序。⑦.renderToHardwareTextureAndroid&(android)&& 设置是否需要GPU进行渲染最后实例的官方实例为:(五)最后总结&&&&&&&&& 今天我们主要介绍了基础控件View的使用方法以及相关属性风格，大家有问题可以加一下群React Native技术交流群()或者底下进行回复一下。& & & &尊重原创，转载请注明：From Sky丶清（） 侵权必究！& & & &关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)& & &关注我的微博，可以获得更多精彩内容& & &&&
本文已收录于以下专栏：
相关文章推荐
1.View属性方法介绍
View属性方法介绍如下:
属性Or方法
accessibilityLabel
RN学习，好多知识都懒得写，趁今天有空，来一发吧，Modal控件的一个小demo；
参考文章地址：/docs/0.27/modal.html#content...
从今天开始我们进入基础组件也就是一些简单控件的学习，之前写的文章貌似太正式了，我正在考虑怎么样才能写的有意思，想想挺难的，算了，写一步算一步吧。今天我们就从最简答的View和Text控件讲起。
accessible：表示此视图时一个启用了无障碍功能的元素。默认为true
onMagicTap：当accessible为true时，双击View会调用此函数。
大家好，时隔几天，我又开始更新新的博文了，最近由于有新的学习任务，比较头疼，加上刚刚过去的清明假期去长城锻炼身体了（微信公众号有彩蛋哦，欢迎关注），闲置了几天时间，所以今天赶紧的再来一发。上次写的关于...
直奔主题：在使用React Native Navigator的时候，很多同学跟我一样，上来就用，但是用了发现一个问题，那就是如下图：看到此处 登录的文字，为毛android上就要跑偏了，当然毕竟使系统...
* Sample React Native App
* /facebook/react-native
在实际手机开发中经常遇到,需要动态计算文本的高度,尤其在文本列表中,当然你可以实现动态计算ListView 的cell的高度,请参考: react
native 实现动态高度...
ReactNative Image嵌套，ReactNative样式
转载请标明出处:http://blog.csdn.net/u/article/details/ 本文出自:【李东的博客】最近一直非常的关注react-native的开...
他的最新文章
讲师：李江龙
讲师：司徒正美
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)导航一直是App开发中比较重要的一个组件，ReactNative提供了两种导航组件供我们使用，分别是：NavigatorIOS和Navigator，但是前者只能用于iOS平台，后者在ReactNative0.44版本以后已经被移除了。
好在有人提供了更好的导航组件，就是我们今天要讲的react-navigation，并且ReactNative官方更推荐我们使用此组件。
本篇文章只讲解基础用法，如果你想了解更多，请戳这里-&。
react-navigation主要包括导航，底部tab，顶部tab，侧滑等，分别为：
导航 -& StackNavigator
底部或者顶部tab -& TabNavigator
侧滑 -& DrawerNavigator
我们今天主要讲TabNavigator。
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
} from 'react-native';
import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation";
class Home ponent {
static navigationOptions = {
tabBarLabel: '热点',
tabBarIcon: ({ focused, tintColor }) =& (
source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
render() {
&View style={styles.container}&
&Text&！这是热点&/Text&
class Circle ponent {
static navigationOptions = {
tabBarLabel: '圈子',
tabBarIcon: ({ focused, tintColor }) =& (
source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
render() {
&View style={styles.container}&
&Text&！这是圈子&/Text&
class Tools ponent {
static navigationOptions = {
tabBarLabel: '工具',
tabBarIcon: ({ focused, tintColor }) =& (
source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
render() {
&View style={styles.container}&
&Text&！这是工具&/Text&
class Mypage ponent {
static navigationOptions = {
tabBarLabel: '我的',
tabBarIcon: ({ focused, tintColor }) =& (
source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
render() {
&View style={styles.container}&
&Text&！这是我的&/Text&
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
const MyApp = TabNavigator(
screen: Home,
screen: Circle,
screen: Tools,
screen: Mypage,
tabBarOptions: {
activeTintColor: '#4BC1D2',
inactiveTintColor: '#000',
showIcon: true,
showLabel: true,
upperCaseLabel: false,
pressColor: '#823453',
pressOpacity: 0.8,
backgroundColor: '#fff',
paddingBottom: 0,
borderTopWidth: 0.5,
borderTopColor: '#ccc',
labelStyle: {
fontSize: 12,
indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
backBehavior: 'none',
module.exports = MyA
NavigationOptions当然，通过NavigationOptions来配置我们的tabBarItem:title - 标题tabBarVisible - 是否可见tabBarIcon -
配置图片，当然，完全可以不使用图片tabBarLabel - 也是配置标题，只不过title既能配置tab的标题，也能配置navigation的标题
TabNavigatorConfig tabBarComponent- 用作标签栏的组件，例如 （这是iOS上的默认设置）， （这是Android上的默认设置）TabBarBottomTabBarToptabBarPosition- 标签栏的位置可以是或'top''bottom'swipeEnabled - 是否允许在标签之间进行滑动animationEnabled - 是否在更改标签时动画lazy - 是否根据需要懒惰呈现标签，而不是提前制作tabBarOptions - 配置标签栏，如下所示。几个选项被传递到底层路由器来修改导航逻辑：initialRouteName - 首次加载时初始标签路由的routeNameorder - 定义选项卡顺序的routeNames数组paths - 将routeName映射到路径配置，该配置将覆盖routeConfigs中设置的路径。backBehavior - 后退按钮是否会使Tab键切换到初始选项卡？如果是，否则设置。默认为行为。initialRoutenoneinitialRoute
tabBarOptions for （iOS上的默认标签栏）TabBarBottom activeTintColor - 活动标签的标签和图标颜色activeBackgroundColor - 活动选项卡的背景颜色inactiveTintColor - 非活动标签的标签和图标颜色inactiveBackgroundColor - 非活动标签的背景颜色showLabel - 是否显示标签的标签，默认为truestyle - 标签栏的样式对象labelStyle - 标签标签的样式对象tabStyle - 标签的样式对象
tabBarOptions for （Android上的默认标签栏）TabBarTop activeTintColor - 活动标签的标签和图标颜色inactiveTintColor - 非活动标签的标签和图标颜色showIcon - 是否显示标签的图标，默认值为falseshowLabel - 是否显示标签的标签，默认为trueupperCaseLabel - 是否使标签大写，默认为truepressColor - 材质波纹颜色（Android& = 5.0）pressOpacity - 按压标签的不透明度（iOS和Android &5.0 only）scrollEnabled - 是否启用可滚动选项卡tabStyle - 标签的样式对象indicatorStyle - 标签指示器的样式对象（选项卡底部的行）labelStyle - 标签标签的样式对象iconStyle - 标签图标的样式对象style - 标签栏的样式对象
1.去掉安卓下的下划线，设置：tabBarOptions =& indicatorStyle:{ height: 0 }；
2.底部导航在导航最上方添加一条分割线，设置：tabBarOptions =& style =& borderTopWidth: 0.5, borderTopColor: '#ccc'；
3.导航安卓图标和文字间隙比较大，手动调整小设置：tabBarOptions =& labelStyle =& margin: 0；
阅读(...) 评论()问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
TabBarIOS只是在ios上能用。我想做一个在ios和安卓上都能用的底部，该怎么做？用view、text、image这三个可以吗？上边的view放内容，下边的view是底部导航，底部导航中的元素用text和image，但是该如何在点击导航中的元素切换内容呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用Navigator自己实现
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个项目里有实现
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
当然可以这样实现，用state控制状态。也可以找别人的库，比如
，都可用，也可以参考他如何实现的。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}