Code Monkey home page Code Monkey logo

react-native.cn's Introduction

第四版重构

我们正在对React Native 中文网进行第四版重构,这次重构主要目标是优化,具体方式包括:

  1. 减少server-rendering的开销,包括页面静态化和动态页面缓存
  2. 引入CI预编译,减少线上服务器的构建开销
  3. 移除redux的使用,改用更直接的react方式
  4. 在运行环境抛弃babel-register,改为预编译的babel方式

提交文档

请访问文档所在的仓库,fork后新建或修订文档,然后创建Pull Request。我们会在第一时间审阅。欢迎社区的朋友们踊跃贡献!

开发环境

Windows

Windows下受到一些限制,所以必须要执行以下命令

npm run webpack
rd /s /q build

react-native.cn's People

Contributors

8088 avatar desgard avatar duzliang avatar futurechallenger avatar galaxybing avatar jaggerwang avatar jinyang1994 avatar kebenxiaoming avatar lekenny avatar leon-z avatar likecold avatar marginyu avatar mikedream89 avatar nihgwu avatar pd4d10 avatar pheart avatar qiaoerr avatar seanwit avatar sunnylqm avatar tdzl2003 avatar xwartz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native.cn's Issues

论坛部分疑问

love your work !

论坛部分体验非常不错,请问下是用什么技术做的?

Modal 显示时刷新页面会使整个页面无法操作且Modal是显示状态

我在使用组件碰到这么个问题:如果我的 visible={true},即Modal处于显示状态,如果我这时候Reload刷新页面,会使得整个页面Modal都是处于显示状态,而且页面也无法点击了,哪怕是点击隐藏也无效。我用的是官方例子。版本:0.51;android环境(真机和模拟器都会出现);这是BUG还是我代码有问题?谢谢大神解惑

1

DatePickerAndroid选择1950年以前的时间有问题。年份不对,会多100年

比如:选的1949 会显示2049年

运行失败 -empty error

由于0.45版本发布,用之前的 react-native init (项目名称) 会运行失败,改为 react-native init (项目名称) --version 0.44.0 就可以,我花了七个多小时才解决这个问题,希望及时更新下,让其他同学少踩坑.

具体如下:
http://bbs.reactnative.cn/topic/4007/%E5%88%9B%E5%BB%BArn%E9%A1%B9%E7%9B%AErun-ios%E5%90%8E%E6%8A%A5%E9%94%99%E4%BA%86-%E5%8F%AF%E8%83%BD%E6%98%AF%E7%89%88%E6%9C%AC%E4%BE%9D%E8%B5%96%E7%9A%84%E9%97%AE%E9%A2%98-%E4%BD%86%E5%B0%B1%E6%98%AF%E4%B8%8D%E7%9F%A5%E9%81%93%E5%9C%A8%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3/2

使用路由器跳转到控制两个TextInput分别显示的页面中,切换两个TextInput时placeholder内容不显示,而直接由index指向这个页面就没有问题?

import React, { Component } from 'react';
import { Text, View, TextInput, Button, TouchableOpacity } from 'react-native';

export class Setting extends Component {
constructor(props) {
super(props);
this.state = {
selectGoodTag: 0,
text1:'',
text2:'',
text3:'',
text4:'',
text5:'',
text6:'',
text7:'' };
}

render() {
return (

<TouchableOpacity onPress={() => this.setState({ selectGoodTag: 0 })}>
<View style={{ alignItems:'center', justifyContent:'center', marginTop:20, padding:20 }}>
体系服务


<TouchableOpacity title="VIP专区" onPress={() => this.setState({ selectGoodTag: 1 })}>
<View style={{ alignItems:'center', justifyContent:'center', marginTop:20, padding:20 }}>
VIP专区


{this.state.selectGoodTag === 0 ?

<View style={[{ height: 45, flexDirection: 'row' }]}>
<View style={{ flex: 1, justifyContent: 'center' }}>
厂商指导价

<View style={{ flex: 1, justifyContent: 'center' }}>
<TextInput
style={{ textAlign: 'right', color: '#333', paddingRight: 10 }}
placeholder="请输入厂商指导价"
placeholderTextColor="#ddd"
onChangeText={(text) => {
this.setState({ text1:text });
}}
value={this.state.text1}
underlineColorAndroid="transparent"
/>


<View style={[{ height: 45, flexDirection: 'row' } ]}>
<View style={{ flex: 1, justifyContent: 'center' }}>
市场零售价

<View style={{ flex: 1, justifyContent: 'center' }}>
<TextInput
style={{ textAlign: 'right', color: '#333', paddingRight: 10 }}
placeholder="请输入市场零售价"
placeholderTextColor="#ddd"
onChangeText={(text) => {
this.setState({ text2:text });
}}
value={this.state.text2}
underlineColorAndroid="transparent"
/>


<View style={[{ height: 45, flexDirection: 'row' }, ]}>
<View style={{ flex: 1, justifyContent: 'center' }}>
进货价

<View style={{ flex: 1, justifyContent: 'center' }}>
<TextInput
style={{ textAlign: 'right', color: '#333', paddingRight: 10 }}
placeholder="请输入进货价"
placeholderTextColor="#ddd"
onChangeText={(text) => {
this.setState({ text3:text });
}}
value={this.state.text3}
underlineColorAndroid="transparent"
/>



:
<View style={[{ height: 45, flexDirection: 'row' }, ]}>
<View style={{ flex: 1, justifyContent: 'center' }}>
市场零售价

<View style={{ flex: 1, justifyContent: 'center' }}>
<TextInput
style={{ textAlign: 'right', color: '#333', paddingRight: 10 }}
placeholder="请输入市场零售价"
placeholderTextColor="#ddd"
onChangeText={(text) => {
this.setState({ text4:text });
}}
value={this.state.text4}
underlineColorAndroid="transparent"
/>


<View style={[{ height: 45, flexDirection: 'row' }, ]}>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text style={{ fontSize: 14 }}>批发价 <Text
style={{ fontSize: 12, color: 'red' }}
>(购买现金)

<View style={{ flex: 1, justifyContent: 'center' }}>
<TextInput
style={{ textAlign: 'right', color: '#333', paddingRight: 10 }}
placeholder="请输入批发价"
placeholderTextColor="#ddd"
onChangeText={(text) => {
this.setState({ text5:text });
}}
value={this.state.text5}
underlineColorAndroid="transparent"
/>


<View style={[{ height: 45, flexDirection: 'row' }, ]}>
<View style={{ flex: 1, justifyContent: 'center' }}>
赠送积分

<View style={{ flex: 1, justifyContent: 'center' }}>
<TextInput
style={{ textAlign: 'right', color: '#333', paddingRight: 10 }}
placeholder="请输入赠送积分"
placeholderTextColor="#ddd"
onChangeText={(text) => {
this.setState({ text6:text });
}}
value={this.state.text6}
underlineColorAndroid="transparent"
/>



}

);
}
}

关于版本的问题

我最近看英文官网,发现官方推荐的是create-react-native-app脚手架加expo调试,中文网是react-native init脚手架和Genymotion调试,这个差异是出于什么考虑吗?

原生组件调用失败

使用指南(IOS)-原生组件

XCode中配置好后,RN中获取原生View
module.exports = requireNativeComponent('RNTMap', null);

RNTMap是从哪里来的? 一直无法找到。 现在的项目和文档中的一样,也是因为无法找到标识无法获取到原生View。

‘refs’ recommend in TouchableHighlight

  1. When I leaning ref,find use ref in TouchaleHighlight ,example:
    <TouchableHighlight
    style={{margin: 10, marginTop: 10}}
    onPress={this._onPressMeasureTouch.bind(this)} >
    4.TouchableHighlight获取视图在屏幕上的位置和尺寸
in _onPressMeasureTouch,can't use this.refs.touchble,beacuse this.refs.touchble is undefined。
  1. Android timer in the debug state will be stuck in the UI thread release when the normal trouble also remember to submit。

[嵌入到现有原生应用]这里说的根目录有歧义

根目录不是项目目录,是项目目录的上一层目录,as的indexing已经导致我卡死了好几次了。看了react-native init 产生的项目目录结构才明白过来!!!

这个歧义一旦as开始index就会卡死。建议改下,防止新手卡死!!!

事例代码问题

在使用Flexbox布局的Align Items用例中,class AlignItemsBasics extends Component前应添加export default。即:export default class AlignItemsBasics extends Component {...}

command not found: adb

输入命令adb devices提示command not found: adb,需要安装什么软件么?另外iOS设备好像没写怎么运行?

react native 没有引用FlatList吗

错误如下
cannot resolve symbol 'FlatList'

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Main.

打包apk之后在app中执行一些操作时会闪退

如题所述,之前在开发APP的时候都是在真机上进行调试,初步测试完成后打包了一个APK想让朋友们安装测测bug,但是打包出来的APK安装后,在APP的登录界面点击登录后会闪退。但调试的时候不会,而且用调试那台手机安装打包出的APP也会在登录的时候闪退。之前打包过不会闪退,这两天加了些权限和功能再打包就不行了。

your open collective

hi @sunnylqm @tdzl2003 I'm one of the founders of Open Collective.
We'd love to have you guys on board but we have a couple of questions, just because you are based in China.
What's your budget goal? And what are you going to be spending the funding on? (for example :web services, local meetup or to pay yourselves?)
Are you all based in China? Do you have paypal? ATM it's our only payout method.
Thanks! <3

为什么我自定复合view把TouchableHightlight 包裹进去也不行呢

<TouchableHighlight
                underlayColor={'#0000'}
                onPress={() => this.props.onAppItemPress(data)}>


                <View
                    style={[styles.container]}>


                    <View style={styles.container_row}>

                        <Image
                            style={styles.logo}
                            source={{
                                uri: this._getImageUrl(data.appLogo),
                                width: 88,
                                height: 88,
                            }}/>


                        <View style={

                        {
                            flex: 1,
                        }}>
                            <Text style={styles.app_name}
                                  numberOfLines={1}>
                                {data.appName}
                            </Text>

                            <Text
                                numberOfLines={1}
                                style={styles.developer_name}>
                                {
                                    this.getNameOrSize(data)
                                }
                            </Text>
                            <View style={styles.price_view_style}>
                                <Text numberOfLines={1}
                                      style={styles.app_price}
                                >
                                    {this.getButtonText()}
                                </Text>
                            </View>
                        </View>

                        <TouchableHighlight
                            style={{width: 40, height: 40,}}
                            underlayColor={'#ffffff'}
                            onPress={() => this._onStarPressed()}
                        >
                            <Image
                                style={styles.star_icon}
                                source={this.state.stared ? {uri: images.star_collection} : {uri: images.star_uncollection}}
                            >

                            </Image>

                        </TouchableHighlight>


                    </View>

                    <View style={styles.divider}/>


                    <Text
                        numberOfLines={2}
                        style={styles.app_desc}>
                        {data.appDesc}
                    </Text>


                    <View style={[styles.container_row, {backgroundColor: '#dde1e7'}]}>

                        <View style={styles.button}>
                            <Image style={styles.button_img}
                                   source={{uri: images.icon_developer}}/>
                            <Text style={styles.button_text}>{data.viewCount}</Text>
                        </View>
                        <View style={{
                            width: 1 / PixelRatio.get(),
                            backgroundColor: 'white',
                            marginBottom: 2,
                            marginTop: 2
                        }}/>
                        <View style={[styles.button]}>
                            <Image style={styles.button_img}
                                   source={{uri: images.icon_collection}}/>
                            <Text style={styles.button_text}>{data.starCount}</Text>
                        </View>

                        <View style={{
                            width: 1 / PixelRatio.get(),
                            backgroundColor: 'white',
                            marginBottom: 2,
                            marginTop: 2
                        }}/>

                        <View style={styles.button}>
                            <Image style={styles.button_img}
                                   source={{uri: images.icon_upload}}/>
                            <Text style={styles.button_text}>{data.likeCount}</Text>
                        </View>

                    </View>
                </View>
            </TouchableHighlight>

Can't perform a React state update on an unmounted component

bug

11:48
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
bug error

intent

I want to use the modal-box to play the video by clicking on the video-image list. So I wrote openVideoFunc to switch video-URL and show/hide modal-box.

code (In order to facilitate reading, part of the code has been simplified (style, etc.))

// Require local img
const image1 = require('./assets/img/1.jpg')
const image2 = require('./assets/img/2.jpg')
// Require local video
const video1 = require('./assets/video/1.mp4')
const video2 = require('./assets/video/2.mp4')
// array object for img/video
const videoRes = [{"videoId": 1,"videoUrl": video1,"posterUrl": image1,"title": "test1","describe": "test1......"},...]

export default function App() {

  const [visible, setVisible] = React.useState(false);
  const [videoUrl, setVideoUrl] = React.useState(null)

// Video Poster List

  const listItems = videoRes.map(item =>
    <TouchableOpacity onPress={() => openVideoFunc(item)} key={item.videoId}>
      <Layout>
        <Image source={item.posterUrl} />
      </Layout>
    </TouchableOpacity>
  )

//open video func

  const openVideoFunc = (item) => {

    setVideoUrl(item.videoUrl) //Switch video url
    setVisible(true) //open modal

  }

  return (

      <Layout>

        {listItems}

        <Modal visible={visible}>

            <Button onPress={() => setVisible(false)} /> //close modalbox           
            <VideoPlayer source: videoUrl /> //videoplayer

        </Modal>

      </Layout>

  );
}

version-Information

"expo-cli": 4.0.13
"expo": "^40.0.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "40.0.0",

当visible 的属性值抽象到state里面时,总是报warning

调用modal组件:
<Modal
animationType={"slide"}
transparent={false}
visible={ this.state.modalVisible }
>
抽象visible属性:
this.state={
modalVisible:false,
}
控制台打印出来的warning:

Warning: Failed prop type: Invalid prop visible of type object supplied to Modal, expected boolean.
in Modal (created by CommentList)
in CommentList (created by VideoDetail)
in RCTView (created by View)
in View (created by VideoDetail)
in VideoDetail (created by Navigator)
in RCTView (created by View)
in View (created by Navigator)
in RCTView (created by View)
in View (created by Navigator)
in RCTView (created by View)
in View (created by Navigator)
in Navigator (created by LiruIos)
in StaticContainer (created by TabBarItemIOS)
in RCTTabBarItem (created by TabBarItemIOS)
in TabBarItemIOS (created by TabBarItemIOS)
in TabBarItemIOS (created by LiruIos)
in RCTTabBar (created by TabBarIOS)
in TabBarIOS (created by LiruIos)
in LiruIos
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

请问原因?如何解决?

flex

根据你的代码把跟布局的大小设置flex:1 布局不显示,也就是说布局的高度为0 不知道你有没有遇到过这种情况

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.