我是React Native的新手。我在最新的函数组件中创建了一个简单的应用程序。
我想要在左侧屏幕
图标上实现onPress
右侧滚动到该元素,这是屏幕上的两个兄弟,您可以将其命名为左侧屏幕和右侧屏幕,左侧屏幕使用style={{flex:1}}
,右侧屏幕使用style={{flex:2}}
左侧屏幕
有一个包含5个元素
的列表,而右侧屏幕
具有所有5个元素,每个列表中都有7个项目,并带有react-native的scroll view中的标题。
当用户单击左侧屏幕图标时,我希望右侧屏幕滚动到标题位置或类似位置。此应用程序类似于当用户单击某个项目时,它会滚动到屏幕上的该项目。我查看了许多教程,但无法实现我的目标。
function leftside(){
<TouchableOpacity style={styles.left_container} onPress={itemA}>
<MaterialCommunityIcons
name={"itesname"}
size={35}
color={"#000"}
/>
<Text>Item</Text>
</TouchableOpacity>
<TouchableOpacity>
... till 5
</TouchableOpacity>
}
右侧:
import React from "react";
import { Text, View, Image } from "react-native";
function rightside({ uri, text }) {
return (
<View style={{ flexDirection: "column", backgroundColor: "#fff" }}>
<View
style={{
justifyContent: "center",
alignItems: "center",
paddingLeft: "5%",
}}
>
<Image
source={{
uri,
}}
style={{ width: 60, height: 80 }}
/>
<Text>{text}</Text>
</View>
</View>
);
}
export default rightside;
我尝试使用了 useRef
并将引用(ref)传递到滚动视图,但对我来说没有起作用,或者可能我使用的方法不正确。
任何有关博客、文章或解决方案的参考资料都将不胜感激! 图片参考在此处..