如何从反应原生列表视图项目打开其他屏幕项目

  • Z时代
  • 2024-01-10
  • 分类：问答

我想在我onPress 的任何项目上打开另一个屏幕。如何从反应原生列表视图项目打开其他屏幕项目

<TouchableHighlight underlayColor={AppColors.black} 
          onPress={Actions.SubCategoryList(item.guid)}> 
     <View> 
       <Item style={{flexDirection: 'row', height: 50, borderBottomWidth: borderWidth}}> 
        <Text style={{ 
         fontFamily: AppStyles.fontFamily, 
         fontSize: 17, 
         flex: 5, 
         color: AppColors.black 
        }}>{item.category_name}</Text> 
        <Item style={{flex: 1, borderBottomWidth: 0, flexDirection: 'row', justifyContent: 'flex-end'}}> 
         <Text style={{ 
          color: AppColors.grey, 
          fontFamily: AppStyles.fontFamily, 
          fontSize: 17, 
          marginRight: 15 
         }}>{item.active_tournaments}</Text> 
         <Image resizeMode="contain" source={require('../../assets/images/right.png')} 
           style={{width: 15, height: 15, marginTop: 3}}/> 
        </Item> 
       </Item> 
      </View> 
     </TouchableHighlight>

但是，无论何时我在当前屏幕上，它都会直接进入子类别屏幕而无需点击。

我想知道如何捕获从另一个屏幕上的当前屏幕发送的数据。

回答：

的问题是，你实际上是调用onPress立即而不是设置它作为一个回调。你可以在下面的代码中看到这个：

onPress={Actions.SubCategoryList(item.guid)}

你有两个选择来解决这个问题。你的第一个选择是在里面添加一个函数调用，像这样：

onPress={() => Actions.SubCategoryList(item.guid)}

你的第二个选择是改变Actions.SubCategoryList函数返回一个回调是这样的：

export function SubCategoryList(guid){ 
    return() => { // this gets called by onPress 
    /* contents of function go here */ 
    } 
}

理想的性能，还会保留基于guid创建的回调缓存，并返回缓存副本而不是创建新副本。这就是所谓的记忆化，而且会是这样的：

let cache = {}; 
export function SubCategoryList(guid){ 
    return cache[guid] || (cache[guid] =() => { 
    /* contents of function go here */ 
    }) 
}

回答：

我一直在使用列表视图上点击登录尝试，看到示例代码

constructor() { 
    super(); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(['row 1', 'row 2']), 
    }; 
    }  
<View> 
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => 
     <TouchableHighlight onPress={()=>{console.log("clicked-- data-->>",rowData)}}> 
     <Text>{rowData}</Text> 
     </TouchableHighlight>} 
     /> 
     </View>

回答：

你可以很容易地使用StackNavigator，它允许您浏览多个屏幕，来传递参数，可以即：列表项，你可以使用这样的：

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
     const { navigate } = this.props.navigation; 
     return (
     <Button 
      title="Go to Jane's profile" 
      onPress={() => 
      navigate('Profile', { name: 'Jane' }) // Sth. you want to pass to next view/screen 
      } 
     /> 
    ); 
    } 
}

然后在所需的屏幕上，你可以从道具上得到你想要的物品：例如。

initialRoute={{ 
    component: MyScene, 
    title: 'My Initial Scene', 
    passProps: {myProp: 'foo'}, 
}}

另一个很好的参考： React Navigation ComdeMentor

以上是 如何从反应原生列表视图项目打开其他屏幕项目 的全部内容， 来源链接： utcz.com/qa/263118.html

回到顶部