React Navigation如何將道具傳遞給TabNavigator無狀態功能組件

我正在學習使用React Navigation並喜歡它，但無法弄清楚如何從我的頂級應用程序組件向我的屏幕組件發送道具。我可能（很可能）完全錯誤地去做這件事。這是我的代碼。React Navigation如何將道具傳遞給TabNavigator無狀態功能組件

主要的應用程序組件

class App extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      signedIn: false, 
      checkedSignIn: false 
     }; 
    } 

    componentWillMount() { 
     isSignedIn() 
      .then(res => this.setState({ signedIn: res, checkedSignIn: true })) 
      .catch(err => alert(err)); 
    } 

    render() { 
     const { checkedSignIn, signedIn } = this.state; 

     if (!checkedSignIn) { 
      return null; 
     } 

     if (signedIn) { 
      console.log("yeah boi"); 
      console.log(SignedOut); 
      return (
       <Provider store={store}> 
        <SignedIn screenProps={(name = "TestName")} /> 
       </Provider> 
      ); 
     } else { 
      console.log("nah bro"); 
      return (
       <Provider store={store}> 
        <SignedOut /> 
       </Provider> 
      ); 
     } 
    } 
}

屏幕

export default ({ navigation }) => 
    <View style={{ paddingVertical: 20 }}> 
     <Card title="John Doe"> 
      <View 
       style={{ 
        backgroundColor: "#bcbec1", 
        alignItems: "center", 
        justifyContent: "center", 
        width: 80, 
        height: 80, 
        borderRadius: 40, 
        alignSelf: "center", 
        marginBottom: 20 
       }} 
      > 
       <Text style={{ color: "white", fontSize: 28 }}>JD</Text> 
      </View> 
      <Button 
       title="SIGN OUT" 
       onPress={() => 
        onSignOut().then(() => navigation.navigate("SignedOut"))} // NEW LOGIC 
      /> 
     </Card> 
    </View>;

導航

export const SignedIn = TabNavigator({ 
    Tasks: { 
     screen: Tasks, 
     navigationOptions: { 
      tabBarIcon: ({ tintColor }) => 
       <SimpleLineIcons name="list" size={30} /> 
     } 
    }, 
    Home: { 
     screen: Home, 
     navigationOptions: { 
      tabBarIcon: ({ tintColor }) => 
       <SimpleLineIcons name="home" size={30} /> 
     } 
    }, 
    Message: { 
     screen: Message, 
     navigationOptions: { 
      tabBarIcon: ({ tintColor }) => 
       <SimpleLineIcons name="envelope-letter" size={30} /> 
     } 
    }, 
    Profile: { 
     screen: Profile, 
     navigationOptions: { 
      tabBarIcon: ({ tintColor }) => 
       <SimpleLineIcons name="user" size={30} /> 
     } 
    } 
});

誰能告訴我，我會怎麼過的道具，比如我嘗試{（NAME =「測試名「）}，到SignedIn SFC？

我是相當新的反應，所以請溫柔:)

感謝山姆

來源

2017-06-15 Sam Banks

我認爲<SignedIn screenProps={(name = "TestName")} />將上漲一個語法錯誤。它應該只是<SignedIn name='TestName' />。更大的問題是您如何使用TabNavigator組件。如果你嘗試以下方法：

export const SignedIn = ({ name }) => TabNavigator({ Tasks: { screen: Tasks, navigationOptions: { tabBarIcon: ({ tintColor }) => <SimpleLineIcons name={ name } size={30} /> } }, Home: { screen: Home, navigationOptions: { tabBarIcon: ({ tintColor }) => <SimpleLineIcons name={ name } size={30} /> } }, Message: { screen: Message, navigationOptions: { tabBarIcon: ({ tintColor }) => <SimpleLineIcons name={ name } size={30} /> } }, Profile: { screen: Profile, navigationOptions: { tabBarIcon: ({ tintColor }) => <SimpleLineIcons name={ name } size={30} /> } } });

來源

2017-06-15 04:42:08 Krasimir

感謝克拉西米爾，但它不是SimpleIcons組件我期待通過道具太，這是示例中的配置文件屏幕 –

使用商店狀態得到的數據，在頂級分量存儲器的設置狀態，使用屏幕組件狀態

來源

2017-06-15 12:59:37

感謝Ashrith，但是我試圖做stat儘可能使用道具。 –

得到它排序，同時仍保持該項目是無狀態的，使用React Navigations screenProps參數。只需要在導航組件中修復我的語法，並在我的屏幕中明確調用screenProps。這是供參考：

主要應用

class App extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      signedIn: false, 
      checkedSignIn: false 
     }; 
    } 

    componentWillMount() { 
     isSignedIn() 
      .then(res => this.setState({ signedIn: res, checkedSignIn: true })) 
      .catch(err => alert(err)); 
    } 

    render() { 
     const { checkedSignIn, signedIn } = this.state; 

     if (!checkedSignIn) { 
      return null; 
     } 

     if (signedIn) { 
      console.log("yeah boi"); 
      console.log(SignedOut); 
      return (
       <Provider store={store}> 
        <SignedIn screenProps={{ name: "TestName" }} /> 
       </Provider> 
      ); 
     } else { 
      console.log("nah bro"); 
      return (
       <Provider store={store}> 
        <SignedOut /> 
       </Provider> 
      ); 
     } 
    } 
}

屏幕

export default ({ navigation, screenProps }) => 
    <View style={{ paddingVertical: 20 }}> 
     <Card title={screenProps.name}> 
      <View 
       style={{ 
        backgroundColor: "#bcbec1", 
        alignItems: "center", 
        justifyContent: "center", 
        width: 80, 
        height: 80, 
        borderRadius: 40, 
        alignSelf: "center", 
        marginBottom: 20 
       }} 
      > 
       <Text style={{ color: "white", fontSize: 28 }}>JD</Text> 
      </View> 
      <Button 
       title="SIGN OUT" 
       onPress={() => 
        onSignOut().then(() => navigation.navigate("SignedOut"))} // NEW LOGIC 
      /> 
     </Card> 
    </View>;

導航

export const SignedIn = TabNavigator({ 
    Tasks: { 
     screen: Tasks, 
     navigationOptions: { 
      tabBarIcon: ({ tintColor }) => 
       <SimpleLineIcons name="list" size={30} /> 
     } 
    }, 
    Home: { 
     screen: Home, 
     navigationOptions: { 
      tabBarIcon: ({ tintColor }) => 
       <SimpleLineIcons name="home" size={30} /> 
     } 
    }, 
    Message: { 
     screen: Message, 
     navigationOptions: { 
      tabBarIcon: ({ tintColor }) => 
       <SimpleLineIcons name="envelope-letter" size={30} /> 
     } 
    }, 
    Profile: { 
     screen: Profile, 
     navigationOptions: { 
      tabBarIcon: ({ tintColor }) => 
       <SimpleLineIcons name="user" size={30} /> 
     } 
    } 
});

來源

2017-06-17 04:06:28

React Navigation如何將道具傳遞給TabNavigator無狀態功能組件

回答

相關問題