从索引到启动=>使其工作正常。家用组件中有2个选项卡，每个选项卡都有一个平面列表，我想从Tab_One Component ...中单击FlatList的项目移到下一个屏幕或堆栈组件。...
索引组件
const Drawer = DrawerNavigator(
{
Home: { screen: Home },
} ,
{
initialRouteName: "Home",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />
}
);
Drawer.navigationOptions = ({ navigation }) => ({
header: null
});
const AppNavigator = StackNavigator(
{
//user define props
Splash: { screen: Splash },
Login: { screen: Login },
List: { screen: List },
Card: { screen: Card },
Home: { screen: Home },
Drawer: { screen: ({navigation}) => <Drawer screenProps={{rootNavigation: navigation}} />
}
},
{
index: 0,
initialRouteName: "Splash",
headerMode: "none"
}
);
export default class CustomDrawer extends Component {
componentDidMount() {
// this.getData();
}
render () {
return (
<AppNavigator />
);
}
saveData(){
try {
let obj = {
name : 'waleediqbal',
refreshtoken : 'fsdffsdfsd' ,
accesstoken : 'erter' ,
username : 'waleed@iqbal' ,
password : '123456',
email : 'waleed@cogilent.com',
};
alert("Task added successfully");
AsyncStorage.setItem('user', JSON.stringify(obj));
}
catch (e) {
alert(e);
}
}
getData() {
helpers.getUser().then((value) => {
alert(JSON.parse(value).email);
}).done();
}
}
AppRegistry.registerComponent('Far', () => CustomDrawer);
Splash Component（移动到stacknavigator中定义的Drawer意味着它实际上从此处移动到Home Component）
export default class Splash extends Component {
componentDidMount(){
setTimeout(()=>{
helpers.getUser().then((value) => {
if(value===null){
console.log("login","null");
const UserData = {"id":null, "email": null,"login":"false"};
helpers.saveUser(UserData);
this.props.navigation.replace("Login");
}
else if(JSON.parse(value).login==="false"){
console.log("login","false");
this.props.navigation.replace("Login");
}
else{
console.log("login","smooth");
this.props.navigation.replace("Drawer");
}
}).done();
},1000);
}
render() {
return (
<View style={styles.container}>
<StatusBar
barStyle="light-content"
backgroundColor="#4F6D7A"
/>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
主页组件（该组件包含2个选项卡）
const AccountTabNav = TabNavigator(
{
Tab_One:
{
screen: Tab_One,
navigationOptions: {
title: "Running"
}
},
Tab_Two:
{
screen: Tab_Two,
navigationOptions: {
title: "Completed" }
}
},
{
tabBarOptions : {
activeTintColor: 'white',
style: {
backgroundColor: '#002D62',
},
indicatorStyle: {
backgroundColor: 'white',
}
}
},
{
backBehavior: "none",
tabBarPosition: "top"
}
);
export default class Home extends Component {
static navigationOptions = ({ navigation }) => {
return
{
headerLeft: (
<View style={{ padding: 10 }}>
<Ionicons name="md-menu" size={24} onPress={() => navigation.navigate('DrawerOpen')} />
</View>
)
}
}
render() {
return (
<Container>
<Header style = {{ backgroundColor: '#FFFFFF' }}>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}
>
<Icon name="menu" style={{color :'#002D62', size : 30}}/>
</Button>
</Left>
<Body>
<Title style = {{ color : '#002D62',fontSize: 20, fontWeight: 'bold'}}>Khata</Title>
</Body>
</Header>
<AccountTabNav screenProps={{ navigation: this.props.navigation }} />
</Container>
)
}
}
Tab_One（在选项卡组件中定义的第一个选项卡。它包含一个列表，我想从单击列表项时移至堆栈组件的其他屏幕，但它不起作用，没有错误，但不能导航）
export default class Tab_One extends Component {
constructor(props) {
super(props);
this.state = {
runningList: null,
loading: true,
userid: null,
refreshing : false
}
this.renderItem = this.renderItem.bind(this);
this._onPress = this._onPress.bind(this);
}
async componentDidMount() {
const value = await AsyncStorage.getItem("UserData");
this.setState({userid: JSON.parse(value).id});
const runningApiCall = await fetch('https://opmlfar.net/api/audit', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
user_id : this.state.userid,
}),
});
try {
const running = await runningApiCall.json();
console.log("data-", running);
this.setState({runningList: running, loading: false});
this.onStop();
}
catch(err) {
console.log("Error fetching data-----------", err);
this.onStop();
}
}
actionOnRow(item) {
console.log('Selected Item :',item);
Alert.alert('You tapped the button!');
}
_onPress (id){
console.log('Selected Item :');
alert(this.props.navigation.state);
console.log(this.props.navigation.state);
this.props.screenProps.navigation.navigate('Card');
}
onRefresh = ()=>{
this.setState({refreshing : true});
this.componentDidMount();
}
onStop = ()=>{
this.setState({refreshing : false});
}
renderItem(data) {
return <TouchableOpacity style={{backgroundColor: 'transparent'}} onPress= {()=> this.props.screenProps.navigation.navigate('Card')}>
<Card flexDirection='column' >
<View style={{flex: 1,flexDirection:'row',left:10,marginTop:10}}>
<Icon color='#BDC3C7' name='adjust' size={15} style={{height:18}} />
<Text style={{fontSize:16, fontWeight:'bold', marginLeft:10 , flex:0.9, color:'#002D62'}}>
{data.item.project.name}
</Text>
<Icon color='#002D62' name='settings' size={25} style={{ height:18, flex:0.1, justifyContent: "right",alignItems: "right" }} />
</View>
<View style={{flex: 1,flexDirection:'row',left:16, marginTop:0, marginBottom:2}}>
<Dash dashColor= '#BDC3C7' style={{width:1, height:23, flexDirection:'column', overflow: 'hidden'}}/>
<Text style={{fontSize:14, fontWeight:'normal',marginLeft:21, flex:0.7, justifyContent: "center",alignItems: "center" }}>
{data.item.start_date} | {data.item.end_date}
</Text>
</View>
<View style={{flex: 1,flexDirection:'row',left:10,marginBottom:10}}>
<Icon name='place' color='#BDC3C7' size={15}/>
<Text style={{ fontSize:14, fontWeight:'bold', marginLeft:12, marginTop:-2, color :'#797D7F'}} >
{data.item.status_name}
</Text>
</View>
</Card>
</TouchableOpacity>
}
render() {
const { navigation, screenProps } = this.props
const { runningList, loading } = this.state;
if(!loading) {
return (
<Container>
<Content padder>
<TouchableHighlight onPress={this.onRefresh}>
<Text style={{fontSize:14, fontWeight:'normal', marginRight:10 ,textAlign: 'right', alignSelf: 'stretch', flex:0.9, color:'#002D62',marginBottom:5}}>
Refresh
</Text>
</TouchableHighlight>
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
/>
}
>
<FlatList
data={runningList.audits}
renderItem={this.renderItem}
keyExtractor={(item) => item.id}
refreshing ={this.state.refreshing}
onRefresh ={this.onRefresh}
/>
</ScrollView>
<Image
source={require("./../../../assets/fireworks.gif")}
style={styles.image}
/>
</Content>
</Container>
);
} else {
return <ActivityIndicator size="large" color="#002D62" style= {{marginTop:10}}/>
}
}
}
Blockquote