React Native DEMO

Posted on | In |

demo介绍

这是一个聊天APP

GitHub

https://github.com/abigaleypc/react-native-demo.git

安装项目

  • git clone https://github.com/abigaleypc/react-native-demo.git
  • cd demo

  • npm install

    启动项目

  • 进入项目文件夹 demo –> ios,

  • 打开 demo.xcodeproj , 启动

最终效果

实现过程

页面切换

页面切换通过导航 navigator 切换，该项目由两个页面组成，即 好友列表 和 聊天窗口

在 index.ios.js 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let defaultName = 'FriendsSence'; // 默认进入路由的名称
let defaultComponent = FriendsSence; // 默认进入的窗口
<Navigator
  style={styles.nav}
  initialRoute={{ name: defaultName, component: defaultComponent }}
  configureScene={(route) => {
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
  }}
  renderScene={(route, navigator) => {
    let Component = route.component;
    return <Component
      {...route.params} navigator={navigator} // 将导航传给待渲染的窗口
    />
  }
  }
/>

以上将导航传给下一个窗口的原因可以参考：新手理解Navigator的教程

FriendsSence 是第一个窗口，即 好友列表，下一个窗口是 ChatSence ,即 聊天窗口。

在 friendSence.js 中，如何跳转至窗口ChatSence 并带上用户的信息呢？

1
2
3
4
5
6
7
this.props.navigator.push({
  name: 'ChatSence',
  component: ChatSence,
  params: {
    name: rowData.name
  }
})

这样就在堆栈里新增一个窗口，返回的话在这个堆栈去掉目前窗口即可，如下：

1
this.props.navigator.pop();

也可以像跳入聊天窗口一样的方法跳入好友列表窗口

列表渲染

列表渲染采用 ListView，参考

1
2
3
4
5
6
7
8
9
10
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = {
  dataSource: ds.cloneWithRows(msgsData[this.props.name])
}
<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <Text>{rowData}</Text>}
/>

消息队列

1
2
3
4
5
this.setState({
  dataSource: this.state.dataSource.cloneWithRows(
    [...this.state.dataSource._dataBlob.s1, 
    ...this.state.inputing])
})
  • this.state.inputing 是需要增加的信息
  • this.state.dataSource._dataBlob.s1 是原数据

过程遇到的问题

  • 类规范：引入的类名需首字母大写

  • 样式不会继承 所以设置字体大小的话只在header里设置并不会在headerText生效

    1
    2
    3
    <View style={styles.header}> 
      <Text style={styles.headerText}>{this.props.title}</Text> 
    </View>

  • TouchableHighlight 按钮文字

    1
    <TouchableHighlight>文字</TouchableHighlight> //这么写是会报错的

应改为

1
<TouchableHighlight><Text>文字</Text></TouchableHighlight>

  • 用闭包解决 this 读取不到的问题

    1
    <TouchableOpacity style={styles.sendBtn} onPress={this.sendMsg()} >
应改为


1
<TouchableOpacity style={styles.sendBtn} onPress={()=>{this.sendMsg()}} >