才学习react-native 1天,遇到2问题,不知道怎么搞,官方的教程根本就不全面,问题如下,大神帮帮忙啊



  • 第一个问题,中文乱码问题,在调试之初中文是不会出现乱码的,可是现在中文已经出现了乱码,不知道怎么处理才好。
    第二个问题,就是ToolbarAndroid的 actions={[{title: 'Settings', icon: require('image!icon_settings')
    show: 'always'}]}的icon数据对应的右边到底是什么格式的图片,连个后缀都没有,我改成了
    require('./images/自己的图片')报错,我干脆就把icon去掉,直接给我不显示了,官方一点说明都没。
    第三个问题,也就是组建与组建之间的关系问题,我想最下面有个导航像淘宝那样,底部都是导航,中间是页面,可是我同时放两个组建直接报错说是必须要包裹到另外一个组建中才行。教程乱七八糟的,很多东西一点说明都没,到处都是坑。
    第四个问题,也就是第三个问题,淘宝底部做那个图标的是什么组件,很多组件官方都连个图都没有,代码又不是全的,贴上去不改绝对报错,让人怎么调试啊,



  • @独门绝学 此外还是组件的问题,最基础的不用谈了,view,text,image这些基础的就别谈了,很简单又好调试,但往往最最核心的是导航条,还有路由(已经搞清楚了),还有一些有相互依赖的组件,有朋友有相关的资料吗?特别是相互直接的关系,强关联的组件需要比较详细的说明,不然一有错又没解决方案,光有报错却不知道怎么写,这让人怎么学习啊,又是到处翻到处看,一个问题纠结1,2天才解决,求大神指点



  • @独门绝学

    1. 请确保你全程使用UTF-8编码,这样不会出现乱码问题。RN默认你的所有源代码都采用UTF-8编码。
    2. 改成了require('./images/自己的图片')报错 请贴出你的报错。
    3. 你缺少React的基础,JSX规定render必须返回“一个”组件,你需要把类似这样的代码
    render(){
      return <组件1 /> <组件2/>;
    }
    

    改成

    render(){
      return <View><组件1 /> <组件2/></View>;
    }
    
    1. TabBar中的图片就是普通图片。不明白你具体遇到了什么问题。你用的是TabBarIOS吗?

    话说回来,才学习一天你就如此深入了,进度喜人,希望你耐心下来,再接再厉,有时候花费时间探索和讨论才是最有收获的,如果一件事情一上手就可以马上做完,这件事情也就没有价值了。遇到问题可以设法精确描述一下你的问题,让大家好来帮助你解决。官方的文档更多的是API参考,并不是教程,你可以考虑跟进我们近期推出的视频教程,可以帮助你细致有序的学习。



  • @独门绝学 感谢,感谢,是这样的,我给你看,我是安卓的开发环境,手机和虚拟机我都有安装测试,
    <ScrollView contentContainerStyle={styles.contentContainer}>
    <View>
    <TouchableOpacity onPress={this._pressButton.bind(this)}>
    <Text>query ID:{ this.state.id }</Text>
    </TouchableOpacity>
    </View>
    <Text>
    通过dimesions 组件来获取宽高,通过pixelratio来获取分辨率
    {'\n'}
    window.width = {width}
    {'\n'}
    window.height = {height}
    {'\n'}
    PixelRatio = {pr}
    </Text>
    <View style={{flex: 1, alignItems: 'center'}}>
    <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
    <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
    </View>
    <View style={styles.container}>
    <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail}/>
    <View>
    <Text>{movie.title}</Text>
    <Text>{movie.year}</Text>
    </View>
    </View>
    <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
    style={{width: width, height: width}} />
    <ToolbarAndroid
    logo={require('./images/index-icon.png')}
    title="AwesomeApp"
    actions={[{title: 'Settings',icon: require('./images/index-icon.png'), show: 'always'}]}
    onActionSelected={this.onActionSelected} />
    </ScrollView>
    代码如上,现在竟然不报错了,可能刚才没刷新造成,但是还是不显示,是不是闭合的标签如<></>里面才能装东西,而< />这种必须要装入闭合标签里不能同时
    <></>
    </>



  • @tdzl2003 0_1458044629397_QQ截图20160315202344.png
    乱码问题我处理了,感谢你的提示,因为我没用ide就用的utraedit所有默认没有编码,大意了,感谢你



  • @独门绝学 你的问题太乱了…… 要回答你的问题真得有耐心。

    粗看了一下你的代码,感觉你的ToolbarAndroid被你挤到屏幕外面去了,你应该把它放在最开头吧。

    <a></a> 和 <a/> 是等价的,如果里面要装东西,就必须用<a></a>这种写法。



  • 那些问题暂不说也没事啦,主要就是这个最纠结,目前单独放也不显示的



  • @独门绝学 问题解决了,需要设计style={{height:高度}}任何组件应该都继承了style的,所以都大胆用


登录后回复