react-native-listview

FlatList onClick navigate to next screen

≯℡__Kan透↙ 提交于 2020-06-10 03:45:37
问题 How do I make a Flatlist navigate to the next screen when a row is clicked inside the Flatlist in react-native? Edited: I posted all the codes inside my JS file. Here is my flatlist code: import React, { Component } from 'react'; import { StyleSheet, Text, View, FlatList, Button, TouchableOpacity, TouchableHighlight } from 'react-native' const Tasks = (props) => { const { navigate } = props.navigation; return ( <View style={styles.container}> <FlatList data={[ {key: 'Task 1'}, {key: 'Task 2'}

Image 'contain' resizeMode not working in react native

烂漫一生 提交于 2020-05-28 12:01:37
问题 I am using React Native on a real Android device. When creating a really simple app with just the following render function on the main app component... render() { <Image source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}} style={ { flex: 1, resizeMode: 'contain', backgroundColor: 'yellow' } } /> } I get the following result on my device: As you can see the whole background is yellow so that tells us the

React Native - get refs of custom components in listview from renderRow

孤者浪人 提交于 2020-01-14 19:09:48
问题 I have a ListView and am trying to access the refs of custom components I have written in the renderRow. I need to do some direct manipulation of the custom components so I need to get the refs of these. It seems like other people have faced this issue too. I have tried following the recommendations in React Native: Refs in ListView and https://github.com/facebook/react-native/issues/897 but they don't seem to work for me. I have tried using the callback ref method as suggested. But, when I

how to change text of button in listview in react native?

岁酱吖の 提交于 2020-01-13 13:53:47
问题 I am trying to change text of button which is in listview quickly after click on it? I am trying with following code to implement this but i cant do it i.e its not working. How can i do it? please help. constructor(props) { super(props); this.state = { button_text:"Connect", } } ConPressed() { this.setState({ button_text: "Connected", }); } render() { return ( <ListView dataSource={this.state.sa} renderRow={(rowData) => <TouchableHighlight onPress={() => this.ConPressed()}> <Text>{this.state

how to change text of button in listview in react native?

≯℡__Kan透↙ 提交于 2020-01-13 13:53:37
问题 I am trying to change text of button which is in listview quickly after click on it? I am trying with following code to implement this but i cant do it i.e its not working. How can i do it? please help. constructor(props) { super(props); this.state = { button_text:"Connect", } } ConPressed() { this.setState({ button_text: "Connected", }); } render() { return ( <ListView dataSource={this.state.sa} renderRow={(rowData) => <TouchableHighlight onPress={() => this.ConPressed()}> <Text>{this.state

React Native Listview grid layout with Listview elements that align and append independently

时间秒杀一切 提交于 2020-01-02 04:42:08
问题 I have a problem regarding the alignment of Listview elements that should be displayed in a more boxed style than in a row style. In the picture you can see the current status, which is produced by using this StyleSheet code used in Listview's contentContainerStyle prop: ListViewStyle: { flexDirection: 'row', flexWrap: 'wrap', } What I want to achieve are wrapped Listview elements without starting a new line after row wrap happened and as a result without having space on the top of of a

Search data in ListView react native

泪湿孤枕 提交于 2019-12-22 14:58:15
问题 I'm currently learning react-native and getting stuck in ListView problems. I want to search data in ListView from a TextInput and i expect that the result is in ListView too. Here's what i've done so far: var PageOne = React.createClass({ getInitialState:function(){ return{ dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, colorProps: { titleColor: 'white', }, searchText:"", } }, componentDidMount() { this.fetchData(); }, fetchData() {