关于view的style定义



  • 使用Noder的作者开发的react-native-html-render组件后,发现文本段和文本段的间距较大,最后追踪到这一行代码,发现是通过pwrapper等html标签定义的一个数值来控制的。

    <View key={index} style={styles[name + 'wrapper']}>
    

    谁能够给讲一下这个xwrapper是自己定义的还是RN内置的。他是如何控制view与view之间的间隔的。



  • 必然是有一个object变量叫做styles(在当前页面定义或引入)



  • @sunnylqm 我其实是想问 为什么这个定义会生效 。。。 我又该如何去处理 这个东西牵扯到 文本段与文本段之间的空白



  • @hainuo 我没懂你的问题。styles定义了,格式有效,那就生效咯
    怎么处理?看第三方有没有给一个方便修改的接口,没有的话自己改源码咯。



  • @sunnylqm 0_1467599895421_Snip20160704_1.png 未设置 pwrapper

    0_1467599918374_Snip20160704_4.png

    设置了pwrapper

    我的疑问 之前可能没表述清楚 就是 在

    <View key={index} style={styles['pwrapper']}>
    <Text>测试文本</Text>
    </View>
    <View key={index} style={styles['pwrapper']}>
    <Text>测试文本</Text>
    </View>
    

    这里的styles['pwrapper'] 设置为数字 是什么意思?
    看打印出来的 log记录
    0_1467600557671_Snip20160704_6.png

    今天我有测试了一下 可以将这个pwrapper设置为json对象
    0_1467600743540_Snip20160704_7.png

    现在看来我之前走入了误区,误以为是因为log中打印出了内容为数字后,只能够写入数字。这个其实已经不是什么问题了,自己还是不太明白这里的设计原则,为什么当那个对象不存在就给他一个数字,提示错误为id呢?



  • StyleSheet对样式进行了一些封装,最后得到的是样式的引用(你看到的数字id)而非样式的内容,这是为了一些性能上的优化

    http://reactnative.cn/docs/0.27/style.html#content



  • copy that